JEST的安装
在已经创立的项目中添加jest
vue add @vue/unit-jest
命令执行完毕后package.json中会新增一个命令行
"test:unit": "vue-cli-service test:unit"
项目的根目录会增加一个tests文件夹,项目根目录会新增一个jest.config.js
新建一个可执行Jest单元测试的项目
1、通过命令行执行命令
vue create project
2、选择项目的初始化配置 Unit Testing 选项为单元测试选项。
3、选择测试所需Testing Runner 我们选用Jest。
4、选择通过config文件进行配置。
5、得到了一个如上图所示的项目目录。
6、我们可以先查看根目录下的package.json文件,里面由一个命令。
"test:unit": "vue-cli-service test:unit"
下面我们在命令行里来运行一下,看看发生了什么?
我们会在终端得到下面的输出内容:
· Test Suites 测试套件
· Tests 测试用例
· Snapshots 快照
· Time 用时 estimated 估计用时
· 运行所有的测试套件。
· 在4.04秒完成
我们看到的这个只是一个简单的测试报告,那么我们如何得到更多得测试报告内容呢。让我们先来执行下面得代码,来看看发生了什么。
npx jest --coverage
并且在项目文件家中,我们可以看到,生成了一个coverage文件夹,来存储测试报告,这个文件夹的名称是可以更改的,这样我们就可以同时储存多个版本号对应的测试报告,生成文件夹的名称我们可以在jest.config.js中进行配置,配置项如下:
module.exports = {
coverageDirectory: 'verson1_0_01'
}
再次执行npx jest --coverage 我们来看看文件夹目录发生了哪些改变。
在项目文件里我们就生成了在vue.config.js中规定的测试报告输出的文件夹名称npx jest --coverage 这个命令我们总是直接使用是不是很不方便,我们可以写一个命令来执行对应的指令。
"coverage": "jest --coverage"
这样我们执行:
yarn coverage
就可以了,来看一下,结果是不是一样呢。
是不是一样呢? 没错是一样的。
本文内容不用于商业目的,如涉及知识产权问题,请权利人联系51Testing小编(021-64471599-8017),我们将立即处理