1. 创建项目
yarn create vite vueJest --template vue-ts
cd vueJest
yarn
2. 安装Jest
yarn add @babel/core @babel/preset-env @testing-library/jest-dom @types/jest @vue/test-utils@next @babel/preset-typescript @vue/babel-plugin-jsx vue-jest@next jest-serializer-vue -D
// 下面三个包的版本需要固定,有些版本和 vue-test 的对应不上,则会出错
yarn add babel-jest@26.0.0 jest@26.0.0 ts-jest@26.4.4 -D
我的相关依赖版本
// package.json
"scripts": {
······
"test": "jest"
},
"dependencies": {
"vue": "^3.2.37"
},
"devDependencies": {
"@babel/core": "^7.19.3",
"@babel/preset-env": "^7.19.4",
"@babel/preset-typescript": "^7.18.6",
"@testing-library/jest-dom": "^5.16.5",
"@types/jest": "^29.2.0",
"@vitejs/plugin-vue": "^3.1.0",
"@vue/babel-plugin-jsx": "^1.1.1",
"@vue/test-utils": "^2.0.0-rc.18",
"babel-jest": "26.0.0",
"jest": "26.0.0",
"jest-serializer-vue": "^2.0.2",
"ts-jest": "26.4.4",
"typescript": "^4.6.4",
"vite": "^3.1.0",
"vue-jest": "^5.0.0-alpha.10",
"vue-tsc": "^0.40.4"
}
3. 根目录下新建jest配置文件
// jest.config.js
export default {
rootDir: process.env.INIT_CWD, //当前项目根目录
clearMocks: true,
coverageDirectory: 'coverage',
coverageProvider: 'v8',
moduleFileExtensions: ['vue', 'js', 'json', 'jsx', 'ts', 'tsx', 'node'],
// 别名设置
moduleNameMapper: {
'@/(.*)$': '<rootDir>/src/components/$1'
},
preset: 'ts-jest',
testEnvironment: 'jsdom',
// 测试文件
testMatch: ['<rootDir>/src/__tests__/**/*.spec.(ts|tsx|js)'],
testPathIgnorePatterns: ['/node_modules/'],
moduleFileExtensions: ['js', 'json', 'ts', 'tsx'],
// 快照
snapshotSerializers: ["jest-serializer-vue"],
transform: {
'^.+\\.vue$': 'vue-jest',
'^.+\\.(ts|tsx|js|jsx)$': [
'babel-jest', {
presets: [
['@babel/preset-env', { targets: { node: 'current' } }],
['@babel/preset-typescript']
],
plugins: ['@vue/babel-plugin-jsx']
}
]
}
}
4. 新建测试文件
// src/__tests__/helloworld/index.spec.js
import { mount } from '@vue/test-utils'
import HelloWorld from '@/HelloWorld.vue'
test('displays message', async () => {
const wrapper = await mount(HelloWorld, {
props: {
msg: 'test msg'
}
})
const btn = wrapper.find('button')
expect(btn.html()).toMatchSnapshot();
// Assert the rendered text of the component
expect(wrapper.find('h1').text()).toBe('test msg')
expect(btn.text()).toBe('count is 0')
await btn.trigger('click')
expect(btn.text()).toBe('count is 1')
await btn.trigger('click')
expect(btn.text()).toBe('count is 2')
expect(btn.html()).toMatchSnapshot();
})
5. 运行jest
yarn jest
生成的快照文件