使用jest进行单元测试

摘要:
使生效npmijestbabel-jest@babel / core@babel/预设env命令安装相应的依赖包。一般的编写方法是“test”:当执行npmruntest命令时,测试目录中的所有文件都将接受相应的jet测试。调试“:verbose”:init“:”test:“jest./test/controller.test.js--watch”:单文件监视测试“test:

以前,写完一段代码我也是直接调用或者实例化一下,发现过了就把测试相关部分删了。今年的不幸与坎坷使我有很长一段时间去思考人生,不想将就了,鲁棒健壮的程序,开发和测试应该是分得很开的,于是我选择jest去做单元测试这件事。

为什么要做单元测试

在开始之前,我们先思考这样一个问题,我们为什么要做单元测试?

不扯犊子直接说吧,第一点,用数据、用茫茫多的测试用例去告诉使用者,你的程序是多么鲁棒健壮;第二点,把它作为一种素养去培养吧,当你按照一系列规范去做事,那么你做出来的东西,我想是有品质在的。

jest的安装

在确保你的电脑装有node环境的情况下,我们通过mkdir jest-study && cd jest-study来初始化项目,然后我们通过npm init -y初始化npm环境。

执行npm i jest babel-jest @babel/core @babel/preset-env 命令安装相应的依赖包,因为后面的例子是基于ES Module的语法编写的,所有需要安装babel进行语法转义。当然你也可以选择直接用CommonJS的写法,node天然支持的。

jest的相关配置

package.json中相关scripts

这里笔者罗列了常用的通用的一些关于jest的脚本,后面测试结果会陆续补充一些测试脚本,以上的脚本都编写在package.json文件下的scripts脚本下面。

通用写法

"test": "jest" : 这个比较傻瓜式,当执行npm run test这条命令是会去对test目录下的所有文件进行相应的jest测试。

"test:help": "jest --help": 顾名思义,如果你不想全局安装jest,又想看看到底有哪些cli命令的话,就它了。

"test:debug": "jest --debug": 顾名思义,debug啊。

"test:verbose": "jest --verbose": 以层级显示地方式在控制台展示测试结果。

"test:noCache": "jest --no-cache": 顾名思义,就是设置有没有缓存,有缓存的话会快点。

"test:init": "jest --init": 执行这句就是在根目录创建一个jest.config.js文件,它在创建的时候有很多选择项给你的。

"test:caculator": "jest ./test/caculator.test.js": 单文件测试。

"test:caculator:watch": "jest ./test/caculator.test.js --watch": 单文件监视测试

"test:watchAll": "jest --watchAll": 监视所有文件改动,测试相应的测试。

大致基础类的脚本测试就总结到这里,接下来我们看下jest.config.js的相关配置。

jest.config.js中相关配置

里面配置的参数太多了,有些配置了以后就可以不再package.json文件下写相应的脚本,这里笔者阉割一部分,列举最常见的几个。

module.exports = {
  // Automatically clear mock calls and instances between every test
  clearMocks: true,
  // The directory where Jest should output its coverage files
  coverageDirectory: "coverage",
  // The test environment that will be used for testing
  testEnvironment: "node",
}

babel相关配置

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

这里就是配置了相应的语法转换预设,如果后期有其他需求,可以通过plugins去配置写补丁转义器,相关内容这里就不做介绍了,可以看下笔者之前写的关于babel的文章。

测试结果

考虑到把相关信息打在控制台上,第一,控制台可能会出现一处的情况;第二,在查看结果内容多的话可能引起眼睛不适,所有就有了楼下几种可能。

测试覆盖率

package.json中的scripts下配置 "test:coverage": "jest --coverage"后,然后执行相应脚本,就会在根目录输出一个coverage文件夹,里面包含了相应的测试脚本。当然控制台也会输出的。

使用jest进行单元测试第1张

html显示

执行 npm i jest-html-reporter安装这个模块包(这里提及一下,在npm版本大于5.x以后,可以默认不加--save这种参数),然后在jest.config.js中配置如下:

  reporters: [
    "default",
    ["./node_modules/jest-html-reporter", {
      "pageTitle": "Test Report"
    }]
  ],

执行相关的jest测试后,会在根目录生成一个test-report.html文件,打开后形如:

使用jest进行单元测试第2张

json显示

package.json中配置scripts脚本 "test:exportJson": "jest --json --outputFile=./export/reporter.json",然后执行npm run test:exportJson就会输出相应的json报告文件,控制台也会以json的形式输出相应信息。

断言(expect)

断言库的种类有很多,例如、assert、should、expect、chai等等,楼下的例子,笔者均以expect作为讲解。

not

先说个最简单的expect(received).not.toBe(expected),这句话的意思就是表示否对,表示我断言、接收值不等于期望值。

toBe(expected)

这个API常用于断言,值类型的期望值,也就是boolean、string、number、这些类型的,用它做引用类型的断言是不合适也不可取的。

to_be.test.js

describe('#toBe', () => {
  it('to be string', () => {
    expect('hello world').toBe('hello world')
  })

  it('to be number', () => {
    expect(1 + 1).toBe(2)
  })

  it('to be boolean', () => {
    expect(true).toBe(true)
    expect(false).toBe(false)
  })

  it('to be null', () => {
    expect(null).toBe(null)
  })

  it('to be undefined', () => {
    expect(undefined).toBe(undefined)
  })
})

toEqual(expected)

通俗的理解就是等于, 可以是值类型也可以是引用类型的相等。

to_equal.test.js

test('#toEqual', () => {
  expect('hello world').toEqual('hello world')
  expect(110).toEqual(110)
  expect(true).toEqual(true)
  expect(false).toEqual(false)
  expect(null).toEqual(null)
  expect(undefined).toEqual(undefined)
  expect([1, 2, 3, 4]).toEqual([1, 2, 3, 4])
  expect({ name: 'ataola' }).toEqual({ name: 'ataola' })
})

toContain(expected) && toContainEqual(expected)

toContain()跟的期望值是值类型的,而toContainEqual() `可以是值类型也可以是引用类型,表示包含。

to_contain.test.js

test('#toContain', () => {
  expect([1, 2, 3, 4]).toContain(1)
  expect([[1, 2], [3, 4], [5, 6]]).toContainEqual([1, 2])
})

数值比较

楼下expect后面跟的英语的字面量意思就是其方法的作用,分别是,大于、大于等于、小于、小于等于、相似于(接近于),这里值得一题的事最后一个toBeCloseTo(),思考一下改成toBe()可以吗?很显然不行,其算出来的结果是0.30000000000000004,究其原因是js采用的是双精度浮点表示。

number_compare.test.js

test('number compare', () => {
  expect(3).toBeGreaterThan(2)
  expect(3).toBeGreaterThanOrEqual(2.5)
  expect(3).toBeLessThan(4)
  expect(3).toBeLessThanOrEqual(3.5)
  expect(0.1 + 0.2).toBeCloseTo(0.3) // <0.05 passed
})

toMatch(expected)

顾名思义,字符串匹配,它支持字符串和正则,/^(w+)1+$/匹配的是一个字符串可以由其字串通过n次组合而成的字串(leetcode一道题目),所有其匹配到的是tao

string_match.test.js

test('string match', () => {
  expect('ataola').toMatch('ataola')
  expect('ataola').not.toMatch('aloata')
  expect('taotao'.match(/^(w+)1+$/)[0]).toMatch('tao')
})

内置的一些基本类型值

null、undefined、真假值比较特殊,所有这里单独有个方法表示它们。

truthiness.test.js

// toBeNull、 toBeUndefined 、 toBeDefined 、 toBeTruthy、 toBeFalsy

test('truthiness', () => {
  expect(null).toBeNull()
  expect(undefined).toBeUndefined()
  expect('i am defined').toBeDefined()
  expect(true).toBeTruthy()
  expect(false).toBeFalsy()
})

ToThrow(expected)

这里是处理相关异常的, 后面可以什么都不根,也可以跟个Error,或者相应的Error输出信息

exceptions.test.js

function gaoError() {
  throw new Error('二营长开炮,开炮,开炮。。。')
}

test('#ToThrow', () => {
  expect(gaoError).toThrow()
  expect(gaoError).toThrow(Error)
  expect(gaoError).toThrow('二营长开炮,开炮,开炮。。。')
})

好了,到这里比较基础和通用的API就介绍到这里。接下来,我们通过自己编写相关代码去巩固下楼上的知识,这里笔者提供两个demo,一个是关于异步获取数据的断言、一个是实现一个计算器类的断言。

异步

我们通过request-promise这个库去请求https://v1.hitokoto.cn去获取相应的json数据,然后进行断言。

hitokoto.js

import rp from 'request-promise'

const getHitokoto = async () => {
  const res = await rp('https://v1.hitokoto.cn')
  return res
}

export default getHitokoto

hitokoto.test.js

import getHitokoto from '../src/hitokoto'

test('hitokoto', async () => {
  const data = await getHitokoto()
  expect(data).not.toBeNull()
})

这里就意思下,读者可以把data里面的数据解构出来,进行相应的断言。

计算器

这里模拟了笔者手机上的计算器,实现了加减乘除清零计算等功能。

caculator.js

class CaCulator {

  constructor() {
    this.result = 0
  }

  add(...args) {
    let { result } = this
    result += args.reduce((pre, cur) => pre + cur)
    this.result = result
    return this
  }

  reduce(...args) {
    let { result } = this
    result -= args.reduce((pre, cur) => pre + cur)
    this.result = result
    return this
  }

  multiply(...args) {
    let { result } = this
    if (result) {
      for (const val of args) {
        result *= val
      }
    } 
    this.result = result
    return this
  }

  divide(...args)  {
    let { result } = this
    const has_zero = args.some(item => item === 0)
    if (has_zero) {
      result = '数学体育老师教的吗?'
    } else {
      for (const val of args) {
        result /= val
      }
    }
    this.result = result
    return this
  }

  clear() {
    this.result = 0
    return this
  }

  exec() {
    const { result } = this
    if (typeof result === 'string') {
      this.result = 0
    }
    return result
  }

  init(n) {
    this.result = typeof n === 'number' ? n : 0
    return this
  }

}

export default CaCulator

caculator.test.js

import Caculator from '../src/caculator'
const caculator = new Caculator()

describe('test Caculator', () => {
  test('#add', () => {
    expect(caculator.add(1).exec()).toBe(1)
    expect(caculator.clear().add(1, 2, 3).exec()).toBe(6)
    caculator.clear()
  })
  
  test('#reduce', () => {
    expect(caculator.reduce(1).exec()).toBe(-1)
    expect(caculator.clear().reduce(1, 2, 3).exec()).toBe(-6)
    caculator.clear()
  })
  
  test('#multiply', () => {
    expect(caculator.multiply(1).exec()).toBe(0)
    expect(caculator.init(1).multiply(2, 3, 4, 5).exec()).toBe(120)
    caculator.clear()
  })
  
  test('#divied', () => {
    expect(caculator.divide(0).exec()).toBe('数学体育老师教的吗?')
    expect(caculator.divide(1, 2).exec()).toBe(0)
    expect(caculator.init(100).divide(2, 2).exec()).toBe(25)
  })
})

这里笔者只是罗列了日常开发中常用的断言API,具体的还是要参见官方文档这样的一手资料,希望能起到抛砖引玉的效果。

参考文献

https://jestjs.io/

https://github.com/Hargne/jest-html-reporter#readme

https://jestjs.io/docs/en/configuration

https://jestjs.io/docs/en/expect

https://jestjs.io/docs/en/using-matchers

知识共享许可协议
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。

免责声明:文章转载自《使用jest进行单元测试》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇cookie,session原理,以及如何使用chrome查看。Android MVP 架构一 View与Presenter下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

【转载】 tensorflow gfile文件操作详解

 原文地址: https://zhuanlan.zhihu.com/p/31536538 ------------------------------------------------------------------------------- 一、gfile模块是什么 gfile模块定义在tensorflow/python/platform/gfil...

用sqlserver的sqlcmd、osql、isql的备份与还原

用sqlserver的sqlcmd、osql、isql的备份与还原 --sqlcmd ,sql2005新加工具1、备份"C:\Program Files\MicrosoftSQLServer\90\Tools\Binn\SQLCMD.EXE" -S .\sqlexpress -U sa -P 000000 -d master -Q"BACKUP DATAB...

vue 2.0 及 vue 3.0 rem配置

vue 2.0 配置 rem   首先先安装postcss-px2rem    (百度可以) https://www.jianshu.com/p/e6476bbc2131     npm install postcss-px2rem 找到文件 build / vue-loader.config.js  添加 const px2rem = require('...

sklearn库调用k近邻算法

python实现KNN算法的全体流程代码#1-1KNN算法的原理底层代码import numpy as npimport matplotlib.pyplot as plt #导入相应的数据可视化模块raw_data_X=[[3.393533211,2.331273381],[3.110073483,1.781539638],[1.343808831,3.3...

GitHub:超分辨率最全资料集锦

前言本文将分享的内容是:超分辨率(Super Resolution,SR)最全资料合集,涵盖了SISR、VSR等。在这里插入图片描述一张图看懂超分辨率SR作用注:文末附超分辨率SR微信交流群,欢迎加入学习Awesome-Super-Resolution    项目作者:ChaofWang Star    数量:636 Commit    数量:120htt...

PHP Laravel的容器化开发与部署

本文说明一下PHP Laravel(包含Lumen)开发下的Docker化部署,写到了使用 CentOS 6.9、CentOS 7.0 进行生产环境部署,并使用了 Kong 来作为 API 网关进行鉴权。 Docker开发环境 首先,我们需要在开发环境下安装 Docker。这部分网络上的资料汗牛充栋,就不赘述了。 在项目根目录下创建 Dockerfile。...