怕什么真理无穷,进一寸有一寸的欢喜

Jest 配置

Matchers(匹配器)

普通匹配器

toBe

测试值的方法是看是否精确匹配。

1
2
3
test('two plus two is four', () => {
expect(2 + 2).toBe(4);
});

toEqual

检查对象的值是否相等。

1
2
3
4
5
test('object assignment', () => {
const data = {one: 1};
data['two'] = 2;
expect(data).toEqual({one: 1, two: 2});
});

覆盖率指标

  • Statements(stmts):表达式覆盖率,是不是每个表达式都执行了?
  • Branches(Branch):分支覆盖率,是不是每个if代码块都执行了?
  • Functions(Funcs):函数覆盖率,是不是每个函数都调用了?
  • Lines(Lines):行覆盖率,是不是每一行都执行了?

react-test-renderer & react-dom/test-utils

enzyme

  • shallow render(shallow)
  • full render(mount)
  • static render(render)

FAQ

如何使用 ES6 的 import 和 export

首先安装 @babel/plugin-transform-modules-commonjs

1
$ yarn add -D @babel/plugin-transform-modules-commonjs

首先新建一个 babel.config.js 文件,添加以下内容:

1
2
3
4
5
6
7
module.exports = {
env: {
test: {
plugins: ['@babel/plugin-transform-modules-commonjs'],
},
},
};

组件测试

生命周期测试

UI测试

组件函数调用

参考链接

  • 3分钟生成开源项目的测试覆盖率
  • 利用 Jest 为 React 组件编写单元测试
  • 携程租车React Native单元测试实践
  • JavaScript 测试系列实战(三):使用 Mock 模拟模块并处理组件交互
  • Jest+enzyme测试React-native项目(从配置到案例)
  • 「基于 Jest + Enzyme 的 React 单元测试 | 掘金技术征文 」
  • 使用jest+enzyme测试react组件
  • 组件生命周期测试 - jest+enzyme
  • 使用Jest测试JavaScript(Mock篇)
  • 使用 Jest 和 Enzyme 测试 React 组件
  • expect(jest.fn()).toHaveBeenCalled() error
  • Testing custom events react-native
  • React组件中的Enzyme测试事件监听器
  • Jest 中 如何测试 setTimeout
  • 代码覆盖率工具 Istanbul 入门教程
  • 一杯茶的时间,上手 Jest 测试框架
  • 用jest+enzyme來寫Reactjs的單元測試吧!
  • Jest单元测试配置和所遇问题解决办法
  • 使用Jest和Enzyme模拟自定义事件
  • Enzyme is not finding component by props
  • TypeError: Cannot read property ‘Object.‘ of null
  • Jest: Ignore lines for code coverage
  • Jest - how to test if a component does not exist?
  • Testing React with Jest, Enzyme, and Sinon
  • How to test React with Jest & Enzyme
  • Better Testing with Enzyme
  • react前端自动化测试: jest + enzyme
  • React Enzyme: Testing componentWillReceiveProps, the Clean Way
  • Test suite failed to run. “RelativeImageStub” error
  • Remove warnings when rendering react-native components
  • Create Adapter for React Native & React 16
  • It looks like you called mount() without a global document being loaded.
  • react-native-mock
  • Refs not working in component being shallow rendered
  • Testing React Component using Enzyme + Jest Part 1: Setup
  • Enzyme笔记
  • setInterval not working when testing with jest
  • Shallow with New React Context API. Consumer not getting context
  • Can’t simulate press event in react-native
  • ReferenceError: You are trying to import a file after the Jest environment has been torn down.
  • Difference between enzyme, ReactTestUtils and react-testing-library
  • Enzyme vs. react-testing-library: A mindset shift
  • Next.js | 初探單元測試,使用 Jest + React Testing Library
  • Testing JavaScript: Learn the smart, efficient way to test any JavaScript application.

实战

  • react-native-elements

其他

  • Sinon 入门,看这篇文章就够了

使用Jest和Enzyme进行React Native单元测试

工具介绍

  • jest
  • enzyme:Enzyme是用于React的JavaScript测试实用程序,可以更轻松地测试React组件的输出。您还可以根据给定的输出进行操作,遍历并以某种方式模拟运行时。
  • enzyme-adapter-react-16: React Native 测试所需的桥接器
  • enzyme-to-json: 将 Enzyme wrappers 转换成符合 Jest 快照测试的JSON格式。
  • jest-enzyme: Jest assertions for enzyme
  • sinon: JavaScript的独立测试间谍(test spies),存根(stubs)和模拟(mocks)。 适用于任何单元测试框架。
  • react-native-mock-render: A fully mocked and test-friendly version of react native

安装依赖

1
2
3
$ yarn add jest -D
$ yarn add enzyme enzyme-adapter-react-16 enzyme-to-json -D
$ yarn add @types/react-test-renderer @types/enzyme @types/jest @types/react @types/react-native -D

配置

jest.config.js

  • setupFilesAfterEnv:使用Jest运行安装文件以配置Enzyme和适配器(如下文jest.setup.js中所示),之前是setupTestFrameworkScriptFile,也可以使用setupFiles
  • snapshotSerializers:推荐使用序列化程序使用enzyme-to-json,它的安装和使用非常简单,并允许您编写简洁的快照测试。
1
2
3
4
5
6
module.exports = {
...
setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
snapshotSerializers: ['enzyme-to-json/serializer'],
...
};

Jest 在 24.1.0 之后只能使用 setupFilesAfterEnv

jest.setup.js

1
2
3
4
5
6
import 'react-native';
import 'react-native/Libraries/Animated/src/bezier'; // for https://github.com/facebook/jest/issues/4710
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

.gitignore

新增忽略快照文件代码:

1
__tests__/__snapshots__/

忽略

忽略整个文件

文件内忽略

大家好,我是俊宁,那个写《Deno从入门到跑路》《基于 Deno 构建 HTTP Server 实践指南》的作者,本来入手Deno只是为了白嫖掘金的大礼包,为此还挑战了零基础一天入门Deno。但是Deno真香,前后又花了一周的业余时间学习了MongoDB写出了一篇自认很完整的 HTTP Server 实践指南(后端同学轻喷)。

阅读全文 »