接上一篇文章

需要依赖的库

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
jest  
@types/jest
babel-jest

// 支持ES6
@babel/preset-env

ts支持
ts-jest
@babel/preset-typescript

vue3支持 vue-jest 版本问题
@vue/vue3-jest // 注意对应版本 https://github.com/vuejs/vue-jest
@vue/test-utils

特殊 需要next
@vue/test-utils@next

我的版本
"@babel/preset-env": "^7.16.7",
"@babel/preset-typescript": "^7.16.7",
"@types/jest": "^27.4.0",
"@vue/test-utils": "^2.0.0-rc.18",
"@vue/vue3-jest": "^27.0.0-alpha.4",
"babel-jest": "^27.4.5",
"jest": "^27.4.5",
"ts-jest": "^27.1.2",

script "test:unit": "jest"

https://github.com/vuejs/vue-jest

Vue version Jest Version Package
Vue 2 Jest 26 and below vue-jest@4
Vue 3 Jest 26 and below vue-jest@5
Vue 2 Jest 27 @vue/vue2-jest
Vue 3 Jest 27 @vue/vue3-jest
1
2
3
4
5
6
7
8
babel.config.js

module.exports = {
presets: [
["@babel/preset-env", { "targets": { "node": "current" } }],
"@babel/preset-typescript",
]
}
1
2
3
4
5
6
7
8
9
10
jest.config.js
对不同文件进行处理

module.exports = {
transform: {
'^.+\\.js$': 'babel-jest',
'^.+\\.vue$': '@vue/vue3-jest',
"^.+\\.(t|j)sx?$": "ts-jest"
}
}
1
2
3
4
5
6
tsconfig.json
新增 jest
"types": ["vite/client", "jest"]

新增 tests
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "tests"],

测试 tests/index.spec.js

1
2
3
4
5
6
7
import { add } from './index'
import About from '../src/views/About/index.vue'
test('1+1=2', () => {
console.log(add()) // 普通函数
console.log(About) // 普通组件
expect(1 + 1).toBe(2)
})

广告(云服务器)

阿里云活动
ECS共享型 n4 1核2G1M,1年79元,3年226。
ECS共享型 s6 2核4G1M,1年263元,3年621。
ECS共享型 s62核-8G-1M,3年859元。
点击查看详情(更多优惠)
腾讯云活动
新用户(老用户换QQ客享受)   云服务器 标准型S3 1核/2G/1M 95一年,   轻量 2核4G5M(限定) 3年只要688 点击查看详情(更多优惠)