单元测试框架:Jest

作者: 前端辉羽 | 来源:发表于2020-01-19 17:26 被阅读0次

Jest
facebook推出的js单元测试的语言
1.首先需要在项目文档中安装jest包
2.创建需要进行单元测试的源代码函数
3.创建测试文件,包含实际的测试代码

1 安装Jest

1.1 初始化package.json
在命令行工具中输入以下命令,初始化前端项目并生成package.json:
npm init -y
1.2 安装Jest及相关依赖
在命令行工具中输入以下命令,安装测试所需要的依赖:
npm install -D jest babel-jest babel-core babel-preset-env regenerator-runtime
babel-jest、 babel-core、 regenerator-runtime、babel-preset-env这几个依赖是为了让我们可以使用ES6的语法特性进行单元测试,ES6提供的 import 来导入模块的方式,Jest本身是不支持的。
1.3 添加.babelrc文件
在项目的根目录下添加.babelrc文件,并在文件复制如下内容:

{
  "presets": ["env"]
}

1.4 修改package.json中的test脚本
打开package.json文件,将script下的test的值修改为jest:

"scripts": {
  "test": "jest"
}

2. 编写你的第一个Jest测试

创建src和test目录及相关文件

  • 在项目根目录下创建src目录,并在src目录下添加functions.js文件
  • 在项目根目录下创建test目录,并在test目录下创建functions.test.js文件

Jest会自动找到项目中所有使用.spec.js或.test.js文件命名的测试文件并执行,通常我们在编写测试文件时遵循的命名规范:测试文件的文件名 = 被测试模块名 + .test.js,例如被测试模块为functions.js,那么对应的测试文件命名为functions.test.js。

在src/functions.js中创建被测试的模块

export default {
  sum(a, b) {
    return a + b;
  }
}

在test/functions.test.js文件中创建测试用例

import functions  from '../src/functions';

test('sum(2 + 2) 等于 4', () => {
  expect(functions.sum(2, 2)).toBe(4);
})

运行npm run test, Jest会在shell中打印出以下消息:

 PASS  test/functions.test.js
√ sum(2 + 2) 等于 4 (7ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        4.8s

3.常用的几个Jest断言

上面测试用例中的expect(functions.sum(2, 2)).toBe(4)为一句断言,Jest为我们提供了expect函数用来包装被测试的方法并返回一个对象,该对象中包含一系列的匹配器来让我们更方便的进行断言,上面的toBe函数即为一个匹配器。我们来介绍几种常用的Jest断言,其中会涉及多个匹配器。
.not

//functions.test.js
import functions  from '../src/functions'

test('sum(2, 2) 不等于 5', () => {
  expect(functions.sum(2, 2)).not.toBe(5);
})

.not修饰符允许你测试结果不等于某个值的情况,这和英语的语法几乎完全一样,很好理解。
.toEqual()

// functions.js
export default {
  getAuthor() {
    return {
      name: 'LITANGHUI',
      age: 24,
    }
  }
}
// functions.test.js
import functions  from '../src/functions';

test('getAuthor()返回的对象深度相等', () => {
  expect(functions.getAuthor()).toEqual(functions.getAuthor());
})

test('getAuthor()返回的对象内存地址不同', () => {
  expect(functions.getAuthor()).not.toBe(functions.getAuthor());
})

.toEqual匹配器会递归的检查对象所有属性和属性值是否相等,所以如果要进行应用类型的比较时,请使用.toEqual匹配器而不是.toBe。

相关文章

  • Jest

    Jest-Javascript单元测试工具 Jest是一个JavaScript测试框架,由Facebook用来测试...

  • Vue单元测试文档

    我们单元测试主要是对Vue组件进行单测单测使用 Jest 框架, 方法库用集成jest的 Vue Test Uti...

  • react-native单元测试

    react-natice单元测试 基于 Jest + Enzyme 的 React 单元测试 Jest、Enzym...

  • Jest 实践

    Jest[https://jestjs.io/zh-Hans/] 作为单元测试框架提供整个测试环境,包括excep...

  • 前端单元测试jest

    不是开源项目,我们一般都很少写单元测试。 不过像单元测试框架jest, 还有mocha+chai可以了解下,万一哪...

  • 单元测试框架:Jest

    Jestfacebook推出的js单元测试的语言1.首先需要在项目文档中安装jest包2.创建需要进行单元测试的源...

  • TypeScript + jest + VSCode 编写单元测

    在 TypeScript 开发中,我们需要为开发的模块编写单元测试,可以使用 jest 这个框架。可参考 npm ...

  • 自动化测试之前端js单元测试框架jest

    大多数开发者都知道需要写单元测试,但是不知道每个单元测试应用的主要内容以及如何做单元测试,在介绍jest测试框架前...

  • React Native单元测试--Jest+Enzyme+st

    React Native的单元测试Jest+Enzyme+storybook demo 配置 Jest配置 Jes...

  • 单元测试jest初识

    单元测试 jest,这个迭代在做新框架压测的时候 第一次接触到 jest,这次总结再做进一步的了解,以后在开发中利...

网友评论

    本文标题:单元测试框架:Jest

    本文链接:https://www.haomeiwen.com/subject/dncczctx.html