01-Jest 学习的前期准备

使用前的准备：

• 在根目录下生成 package.json 文件；
• 学习时，本地开发环境建议安装 [email protected];
• 在 package.json 中修改 script 中的命令 test:'jest'，其中运行 jest 会自动去找当前目录下以 test.js 结尾的文件；
• 新建一个 js 文件 math.js，内容如下：

  add = (a, b) => {
    return a + b;
  }
  
  minus = (a, b) => {
    return a - b;
  }
  
  multiple = (a, b) => {
    return a - b;
  }
  
  module.exports = {
    add,
    minus,
    multiple
  }
  

• 新建一个存放测试用例的 js 文件 math.test.js，内容如下：

  const math = require('./math');
  const {add ,minus, multiple} = math;
  
  test('测试加法 3 + 7', () => {
    expect(add(3, 7)).toBe(10);
  })
  
  test('测试减法 9 - 6', () => {
    expect(minus(9, 6)).toBe(3)
  })
  
  test('测试乘法 3 * 4', () => {
    expect(multiple(3, 4)).toBe(12)
  })
  

• 在命令行直接运行 npm run test即可，如果有错误，会有很详细的报错信息，这里可以根据自己需要去修改结果体验。

jest 可以完成两个方面的测试：

• 单元测试：模块测试；
• 集成测试：多个模块测试。

jest 简单配置

• 生成 jest.config.js 文件：npx jest --init
  • 可能会报错 npx command not found,需要全局安装 npx：npm i -g npx;
• 在 package.json 中添加测试覆盖率的语句 coverage: npx jest --coverage，可以查看文件的覆盖率。

采用 es6 模块知识

• 之前的 module.exports 导出和 require 引入都是 commonjs 语法，现在将其修改成 es6 语法的模块导出和引入，会发现一堆报错。这时安装使用 babel 解决：npm i @babel/[email protected] @babel/[email protected]；

• 在根目录下创建 .babelrc 文件：

  {
    "presets": [
      [
        "@babel/preset-env", {  // 转换 import 语法
          "targets": {
            "node": "current"
          }
        }
      ]
    ]
  }
  

  "@babel/preset-env", { // 转换 import 语法
  原理：
  1、jest 有一个插件叫 babel-jest；
  2、当运行 npm run jest 时，会检测是否安装了 babel 或者 babel-core；
  3、如果安装了，就会去读取 babelrc 里面的配置；
  4、拿到配置之后，会在运行之前结合 babel，先把代码进行转化，然后运行

• 将 math.js 文件中的模块导出改成 es6 中的语法:

  export function add(a, b){
    return a + b;
  }
  
  export function minus(a, b){
    return a - b;
  }
  
  export function multiple(a, b){
    return a * b;
  }
  

• 将 math.test.js 中引入的方法改成 es6 中的语法:

  import {add ,minus, multiple} from './math';
  
  test('测试加法 3 + 7', () => {
    expect(add(3, 7)).toBe(10);
  })
  
  test('测试减法 9 - 6', () => {
    expect(minus(9, 6)).toBe(3)
  })
  
  test('测试乘法 3 * 4', () => {
    expect(multiple(3, 4)).toBe(12)
  })