Jest

测试框架。用于测试逻辑等内容。主要分为单元测试(进一步的，可进行集成测试)和模块测试。

安装

npm i jest -D

在package.json中，将scripts属性的test的值改为jest，这样在npm run test时，jest会寻找带有test字样的js文件

另外，如果写成test --watchAll，那么系统会帮我们重新执行测试

请像图中一样，创建math.js和math.test.js

math.js中

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

module.exports = {
  add,
}

math.test.js中

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

test('测试加法', ()=>{
  expect(add(3,5)).toBe(10);
})

暴露Jest的配置

npx jest --init

执行这行命令后jest会有询问项。根据需要选择即可。在这节中分别选择或输入

• jsdom
• y
• y

然后会在根目录生成jest.config.js文件。里面能够看到我们选y的两个选项是解除注释的状态。

coverageDirectory

这个属性是测试报告存放的路径，其值为生成的文件夹名称。

npx jest --coverage

生成报告，能够看到测试数据。

执行后会在根目录生成一个文件夹，其名为coverageDirectory的值。其中的Icov-report文件夹里还有index.html文件，打开可以看到网页形式的测试报告。

拓展——使用es形式的导入

上面代码里使用了commonJS形式的代码导入。如果我们想使用es形式的代码导入，例如：

math.js中

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

math.test.js中

import {add} from './math.js'

test('测试加法', ()=>{
  expect(add(3,5)).toBe(10);
})

像这样导入，就需要使用babel将es转换成能够被识别的代码。

安装babel。@符号后是版本，可以不写具体版本，视个人情况而定

npm i @babel/core@7.4.5 @babel/preset-env@7.4.5 -D

接下来在根目录创建.babelrc文件，内容如下：

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

这样，当我们执行npm run test的时候(前提是package.json里test的值已经改成了jest)，jest就会使用babel-jest插件检测babel模块是否存在，存在则寻找.babelrc里的配置，然后先转换再执行