Vue-Jest 自动化测试基础配置详解

安装 Jest 和 Vue-Jest

首先，你需要安装 Jest 和 Vue-Jest 作为你的项目的开发依赖。你可以使用以下命令来安装它们：

npm install --save-dev jest vue-jest @vue/test-utils

配置 Jest

接下来，你需要在项目中配置 Jest。创建一个 jest.config.js 文件，并添加以下配置：

module.exports = {
  preset: '@vue/cli-plugin-unit-jest/presets/typescript',
  testMatch: [
    '**/__tests__/*.(spec|test).[jt]s?(x)',
    '**/tests/unit/**/*.spec.[jt]s?(x)'
  ],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '^.+\\.js$': 'babel-jest',
    '^.+\\.(t|j)sx?$': 'ts-jest'
  },
}

这个配置文件告诉 Jest 如何处理不同类型的文件，例如 Vue 单文件组件、JavaScript 文件和 TypeScript 文件。

编写测试用例

现在，你可以编写你的测试用例了。比如，假设你有一个名为 HelloWorld.vue 的组件，你可以创建一个 HelloWorld.spec.js 文件来编写测试用例：

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

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message'
    const wrapper = shallowMount(HelloWorld, {
      propsData: { msg }
    })
    expect(wrapper.text()).toMatch(msg)
  })
})

在这个测试用例中，我们使用 shallowMount 方法来渲染 HelloWorld 组件，并验证它是否正确地渲染了 msg 属性的值。

运行测试

最后，你可以运行你的测试用例：

npm run test:unit

这个命令会使用你的 Jest 配置来运行测试用例，并输出测试结果。

通过以上步骤，你就完成了 Vue-Jest 的自动化测试基础配置，并且编写并运行了一个简单的测试用例。你现在可以根据你的项目需求来编写更多丰富的测试用例。