单元测试
关于单元测试的概念和原因我这就不多说了，大家网上搜一下就好了，就简单介绍一下我使用的技术和背景吧。
对于前端来说，单元测试主要就是检测一个函数或者一个模块的测试。对于vue项目来说，更多的来检测函数和组件。
本章使用Jest配置单元测试框架，由于技术迭代频率快，申明一下，本文使用26.x系列（27.x部分功能暴力改动，会出现兼容性问题）
项目搭建
# npm 6.x
npm init vite@latest vue-web --template vue
# npm 7+，需要加上额外的双短横线
npm init vite@latest vue-web -- --template vue
# vue3 + vite + ts
cd vue-web
yarn
安装依赖
安装单元测试需要使用到的依赖，单元测试为本地开发使用，所有依赖默认安装在dev环境下
# jest
yarn add jest@26.6.3 @types/jest@26.0.14 -D
# jest 本身不识别es6+的语言，所以需要babel转换
yarn add babel-jest -D
# vue 默认情况下jest对于的是Vue2版本，对于Vue3需要安装next版本
yarn vue-jest@next @vue/test-utils@next -D
# ts
yarn add ts-jest@26.5.6 -D
在pakege.json文件配置测试命令
{
"scripts": {
"test": "jest"
}
}
配置文件
这时候我们启动测试命令，是无法执行的，所以需要配置一些符合项目技术的配置文件，配置内容比较杂，这里先把所有内容配置好，在进行说明。
- jest.config.js
module.exports = {
transform: {
"^.+\\.jsx?$": "babel-jest",
"^.+\\.vue?$": "vue-jest",
"^.+\\.tsx?$": "ts-jest",
}
}
- babel.config
module.exports = {
presets: [
["@babel/preset-env", {targets: {node: "current"}}],
"@babel/preset-typescript"
]
}
- tests/unit/index.conf.js
import { sort } from '../../src/test.js'
test('比大小', () => {
console.log(sort)
expect(sort(1,2)).toBe(2)
})
- tsconfig.json
{
"compilerOptions": {
... ,
"types": ["jest"]
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "tests"]
}
其实没有很细节的要求下，每一个配置都不负责，在其官网都会有详细的说明，这里只是完成了最简单的配置，详细配置请参照官网：
jest
vue-test-utils
请注意官网所说的一些无法测试的模块和场景
测试
启动测试命令
yarn test
发现缺少对应的babel模块，安装后重新检测
yarn add @babel/preset-env @babel/preset-typescript -D
yarn test
## 运行结果
到此，简单的单元测试就完成了。
再次注意：26和27版本之间不兼容
