初始化一个项目
1.创建一个文件夹，用npm init -y初始化一个项目。
2.创建一个简易的项目结构，如下图所示：
环境准备
一、安装依赖
方式一：
1.在package.json中键入如下内容
2. npm install统一安装
方式二：使用命令依次安装，下面只展示部分安装依赖步骤
// 单元测试所需依赖
npm install jest@26.6.3 babel-jest@26.6.3 @vue/test-utils@next vue-jest@next -D
安装babel桥接
npm install babel-core@bridge -D
二、设置配置文件
babel.config.js
module.exports = {
presets: ['@babel/preset-env']
}
jest.config.js
module.exports = {
"testMatch": ["**/__tests__/**/*.[jt]s?(x)"],
"transform": {
".*\\.vue$": "vue-jest", // *.vue文件用vue-jest处理
".*\\.js$": "babel-jest" // *.js文件用babel-jest处理
},
"moduleFileExtensions": [ // 告诉jest要处理哪些格式的文件
"js",
"vue"
]
}
给package.json增加一个test脚本
scripts: {
"test": "jest"
}
三、编写vue单文件组件样例
// Jest.vue
<template>
<div?class=''>
<p>{{counter}}</p>
<button?@click="add">累加</button>
</div>
</template>
<script>
import?{?ref?}?from?'vue';
export?default?{
name:?"Jest",
setup(){
let?counter?=?ref(0);
function?add()?{
counter.value++;
}
return?{
counter,
add
}
}
}
</script>
四、编写单元测试用例
// jest.test.js
import?'regenerator-runtime/runtime' // 解决ReferenceError: regeneratorRuntime is not defined问题
import?Jest?from?'../src/Jest.vue';
import?{?shallowMount?}?from?'@vue/test-utils';
describe("test?jest",()?=>?{
test('trigger',async?()?=>?{
const?wrapper?=?shallowMount(Jest);
await?wrapper.find("button").trigger("click");
expect(wrapper.find("p").text()).toBe("1");
await?wrapper.find("button").trigger("click");
expect(wrapper.find("p").text()).toBe("2");
})
})
运行测试用例
npm test
结果如下，即为成功。
运行测试用例遇到的问题
1.各个依赖包版本不一致导致的测试用例不能执行
2.ReferenceError: regeneratorRuntime is not defined
解决办法
1.保存jest、vue-jest、babel-jest版本一致
2.安装regenerator-runtime依赖，npm install regenerator-runtime -D,并在测试用例文件中导入依赖import?'regenerator-runtime/runtime'
本文内容不用于商业目的，如涉及知识产权问题，请权利人联系51Testing小编(021-64471599-8017)，我们将立即处理
