Jest 的介绍

Jest是 Facebook 的一套开源的 JavaScript 测试框架， 它自动集成了断言、JSDom、覆盖率报告等开发者所需要的所有测试工具，是一款几乎零配置的测试框架。并且它对同样是 Facebook 的开源前端框架 React 的测试十分友好。

 

使用Jest自动化测试样例

第一步：安装node环境，要使用Jest需要node的环境(安装node的时候npm会顺带安装上)

第二步：使用npm init 初始化项目,根据提示信息，输入相应的

gtest框架 jest框架_测试框架

第三步：安装Jest，使用npm install jest@24.8.0 -D （-D表示安装在 devDependencies中。因为开发环境才需要测试，线上环境不需要测试）

第四步：想要使用Jest做前端自动化测试，那么需要测试的函数库就必须使用模块的形式将其导出

function add(a, b) {
  return a * b;
}

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

module.exports = {
  add,
  minus,
};

第五步：在test文件中引入这些方法

const math = require('./math.js');
const {add, minus} = math;

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

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

第六步：运行，改写package.json文件，将scripts下的test改为jest，相当于我们运行npm run test的时候就是运行jest命令，这个命令会去找与package.json文件同级及下级目录下的所有于.test.js结尾的文件，然后去运行这些文件

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "math.js",
  "scripts": {
    "test": "jest"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "jest": "^24.8.0"
  }
}

gtest框架 jest框架_babel_02

 

 

Jest配置

Jest本身有一些默认的基本的配置项，只要安装好后就能使用，也可以自己配置一些自己想要的配置，就需要打开配置项进行配置了

在项目目录下输入命令行：npx jest --init，然后选择jest的运行环境是node还是浏览器，接着选择是否需要js帮你生成coverage代码覆盖率的报告，清除模拟调用的事件。并且项目目录下会多一个文件：jest.config.js

gtest框架 jest框架_gtest框架_03

coverage代码覆盖率的报告，就是说看你的测试代码有没有覆盖到所有，并且会在项目目录下生成一个coverage目录（该目录名称取决于配置文件中的coverageDirectory这个配置），运行如下命令：

npx jest --coverage

gtest框架 jest框架_配置babelrc_04

 

 

修改模块化的规范

前面搭建的是node的环境，默认的模块化规范是commonJS的规范，只能使用  require方式引入其他模块。

一边情况下我们习惯使用export将模块导出

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

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

这种方式导出后，在别的模块中想要使用这个模块中的方法，就是用import的方式将模块引入

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

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

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

但前提是使用babel这个工具帮助我们将import语法转换成commonjs的语法

第一步：安装babel和babel/preset

gtest框架 jest框架_配置babelrc_05

第二步：配置babel，在项目根目录创建一个.babelrc文件

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "node": "current"
      }
    }]
  ]
}

然后在运行npm run test就没有问题了。

底层的机制：当运行npm run test的时候，jest内部集成了插件叫做babel-jest

babel-jest会检测当前环境下是否安装了babel-core ，如果安装了就会去当前项目的根目录找到.babelrc这个文件 的配置

然后运行测试 之前结合babel，先把你的代码做一次转化 ，然后运行转化过的代码。

 

 

自动检测测试文件的修改

当我们修改测试文件之后，每次都要运行npm run test命令会很麻烦，所以可以在package.josn文件中的test命令中添加一些命令，当我们修改了测试文件后会自动检测到文件的修改，自动重新执行测试文件

gtest框架 jest框架_Jest的使用_06

修改完后再次运行npm run test，会看到控制台一直在监控着测试文件

gtest框架 jest框架_Jest的使用_07