01-Jest 学习的前期准备

使用前的准备:

  • 在根目录下生成 package.json 文件;
  • 学习时,本地开发环境建议安装 jest@24.8.0;
  • 在 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/core@7.4.5 @babel/preset-env@7.4.5

  • 在根目录下创建 .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)
    })
    

推荐阅读更多精彩内容

  • rljs by sennchi Timeline of History Part One The Cognitiv...
    sennchi阅读 4,845评论 0 10
  • 你也可以使用Jest的“匹配器”来测试数据。有很多不同的匹配器,所以这篇文章只会介绍最常用的几种。 普通匹配 最简...
    人头原子弹阅读 300评论 0 0
  • webpack初识 压缩、打包 只认识 JS 多种文件编译——loader 脚手架 生成生产版 下载 先安装nod...
    简小园阅读 67评论 0 1
  • mean to add the formatted="false" attribute?.[ 46% 47325/...
    ProZoom阅读 1,096评论 0 3
  • 老公的表嫂打电话来说是他丈夫最近有些胸闷兼隐痛,让我介绍一个医生看看。第二天我带他们到呼吸科看病,主任开始问病情,...
    绿罗衩阅读 37评论 0 0