vue中如何使用jest单元测试

下面我将讲解 vue 中如何使用 Jest 单元测试，包含以下内容：

1. 安装 Jest
2. 创建一个基本的测试用例
3. 测试 Vue 组件
4. 测试异步操作
5. 示例说明

1. 安装 Jest

首先，我们需要全局安装 Jest：

npm install -g jest

或者在项目中安装 Jest：

npm install --save-dev jest

2. 创建一个基本的测试用例

创建一个新的测试用例文件，例如 test/example.test.js，并编写以下代码：

test('测试用例示例', () => {
  expect(true).toBe(true)
})

运行以下命令进行测试：

jest test/example.test.js

期望的输出结果如下：

PASS  test/example.test.js
  ✓ 测试用例示例 (3ms)

3. 测试 Vue 组件

在测试 Vue 组件之前，我们需要安装 vue-jest：

npm install --save-dev vue-jest

然后，在 jest.config.js 文件中添加以下配置：

module.exports = {
  moduleFileExtensions: [
    'js',
    'vue'
  ],
  transform: {
    '^.+\\.js$': 'babel-jest',
    '.*\\.(vue)$': 'vue-jest'
  },
}

现在，我们可以创建一个基本的 Vue 组件测试文件，例如 test/Component.test.vue：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, World!'
    }
  }
}
</script>

然后，编写以下测试代码：

import { shallowMount } from '@vue/test-utils'
import Component from '@/test/Component.test.vue'

test('测试 Vue 组件', () => {
  const wrapper = shallowMount(Component)
  expect(wrapper.text()).toBe('Hello, World!')
})

运行以下命令进行测试：

jest

期望的输出结果如下：

PASS  test/Component.test.vue
  ✓ 测试 Vue 组件 (2ms)

4. 测试异步操作

有些场景下，我们需要测试异步操作，例如 API 请求、Promise、async/await 等。

首先，我们需要安装 axios：

npm install --save axios

然后，我们可以创建一个 Api.js 文件：

import axios from 'axios'

export default {
  async fetchUser(userId) {
    const response = await axios.get(`https://jsonplaceholder.typicode.com/users/${userId}`)
    return response.data
  }
}

现在，我们可以编写以下测试代码：

import Api from '@/Api'

test('测试异步操作', async () => {
  const user = await Api.fetchUser(1)
  expect(user.id).toBe(1)
})

运行以下命令进行测试：

jest

期望的输出结果如下：

PASS  test/Api.test.js
  ✓ 测试异步操作 (246ms)

5. 示例说明

下面是一个完整的 Vue 组件测试用例，用于测试一个包含语言切换功能的组件：

<template>
  <div>
    <button @click="switchLanguage('en')">English</button>
    <button @click="switchLanguage('zh')">中文</button>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      language: 'en',
      messages: {
        en: 'Hello, World!',
        zh: '你好，世界！'
      }
    }
  },
  methods: {
    switchLanguage(language) {
      this.language = language
    }
  },
  computed: {
    message() {
      return this.messages[this.language]
    }
  }
}
</script>

import { shallowMount } from '@vue/test-utils'
import Component from '@/test/Component.test.vue'

test('测试初始状态', () => {
  const wrapper = shallowMount(Component)
  expect(wrapper.vm.language).toBe('en')
  expect(wrapper.text()).toContain('Hello, World!')
})

test('测试语言切换到中文', () => {
  const wrapper = shallowMount(Component)
  const button = wrapper.find('button:nth-of-type(2)')
  button.trigger('click')
  expect(wrapper.vm.language).toBe('zh')
  expect(wrapper.text()).toContain('你好，世界！')
})

test('测试语言切换到英文', () => {
  const wrapper = shallowMount(Component)
  const button = wrapper.find('button:nth-of-type(2)')
  button.trigger('click')
  button.trigger('click')
  expect(wrapper.vm.language).toBe('en')
  expect(wrapper.text()).toContain('Hello, World!')
})