前端自动化测试框架Jest的简单配置

发表于:2022-3-22 10:08

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

 作者:三年没洗澡    来源:掘金

#
Jest
  在之前的文章中,我们实现了 expect 方法 和 test 方法,介绍了 Jest 的基础使用,今天我们来说说 Jest 的简单配置。
  Jest 和 Webpack 一样都有默认配置,我们可以运行 npx jest --init 命令来初始化默认配置。在运行命令行的时候,会弹出一些选项,比如:
  ·是否需要开启typescript
  · 是否需要生成覆盖率报告
  · 选择node 环境或者浏览器环境
  · 测试完成之后,是否需要进行一些清除工作
  ……
  这些选项可以根据自己的实际情况进行选择是或者否。

  当全部选择完成之后,可以看到在目录中多了一个 jest.config.js 文件,这时候就说明初始化配置完成了。

  代码测试覆盖率
  当我们在控制台中输入npx jest --coverage时,控制台会打印出以下信息:

  这是一个关于测试覆盖率的说明,这是一个图表信息,它告诉我们所有的文件都被100%的测试到了。
  如果觉得执行npx jest --coverage命令太麻烦,你也可以将如下代码添加到 package.json 中:
"scripts": {
  "test": "jest",
  "coverage": "jest --coverage"
},

  然后可以执行npm run coverage,和执行npx jest --coverage是一样的效果。
  除了控制台可以看到图表信息之外,你还可以在当前目录下看到一个生成的coverage目录:

  在里面有一个lcov-report文件夹,里面有一个index.html,我们打开它会看到:

  可以看到,这是一个通过Jest生成的非常漂亮的html页面,上面会告诉我们,我们的每一个文件的测试到底覆盖了多少代码。可以看到,math.js 中的代码都被100%覆盖到了。
  通过这个例子,我们就理解了code coverage(代码覆盖率)的意思了。
  总结来说:测试覆盖率就是我们编写的测试代码对原来的功能代码的占比。
  tips: 配置文件中的coverageDirectory就是代码测试覆盖率生成报告所在的文件夹的名字:
module.exports = {
  coverageDirectory: "abc"
};

  例如,我们让coverageDirectory的值为abc,那么生成的测试报告就在目录abc下面。

  把commonjs改成es module
  我们先把 math.js 和 math.test.js 中的代码改成 es module 的规范:
// math.js

export function add(a, b) {
  return a + b;
}

export function minus(a, b) {
  return a - b;
}

export function multi(a, b) {
  return a * b;
}

// math.test.js

import { add, minus, multi } from "./math";

test("测试加法 3 + 3", () => {
  expect(add(3, 3)).toBe(6);
});

test("测试减法 3 - 3", () => {
  expect(minus(3, 3)).toBe(0);
});

test("测试乘法 3 * 3", () => {
  expect(multi(3, 3)).toBe(9);
});

  然后运行 npm run test,会发现控制台报错了。
  要解决这个问题,需要用到 Babel 把代码进行转化就OK了,如果想让 Babel 支持 ESM,我们需要三个包:
  ·@babel/core:babel核心库
  · @babel/preset-env:进行 ES 语法转换的库
  · babel-jest:和 Jest 通信的库,用来检测是否安装了上面两个依赖
  但是因为我们在安装 Jest 的时候 babel-jest 就默认被安装了,所以我们只需要安装剩下两个包就行了。
  安装依赖:
npm install @babel/core @babel/preset-env -D

  注:-D 是 --save -dev 的缩写。
  安装完成之后,在项目的根目录下创建一个 .babelrc 配置文件:

  创建完成之后,将如下代码添加到 .babelrc 中:
{
  "presets": [["@babel/preset-env", { "targets": { "node": "current" } }]]
}

  保存之后,重新运行 npm run test,执行测试用例即可。

  本文内容不用于商业目的,如涉及知识产权问题,请权利人联系51Testing小编(021-64471599-8017),我们将立即处理
《2023软件测试行业现状调查报告》独家发布~

关注51Testing

联系我们

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

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

沪ICP备05003035号

沪公网安备 31010102002173号