使用Jest在vue项目中进行单元测试的尝试(二)

发表于:2022-1-05 09:32

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:茗远    来源:稀土掘金

分享:
  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),我们将立即处理
价值398元的测试课程免费赠送,填问卷领取吧!

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计

法律顾问:上海漕溪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2023
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号