首先，你需要安装 Jest 和 Vue-Jest 作为你的项目的开发依赖。你可以使用以下命令来安装它们：
npm install --save-dev jest vue-jest @vue/test-utils
接下来，你需要在项目中配置 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 的自动化测试基础配置，并且编写并运行了一个简单的测试用例。你现在可以根据你的项目需求来编写更多丰富的测试用例。
本文链接：http://task.lmcjl.com/news/6473.html