在这个四部分系列中,了解如何使用Jest和Enzyme来测试您的React / Redux应用程序,以获得强大的测试解决方案。
<$>[注]本系列专注于测试,并假定您有 React / Redux 知识。
系列
推荐的文件结构
- Leverage Default Behavior: 默认情况下, Jest 在
__tests__文件夹中寻找测试 - 文件夹等级: 镜像您的
src文件夹等级以便更容易地管理测试 - 按类型分离: 保持组件、操作和减速器的单独文件夹
- 附加文件名: 对于包含测试的文件,使用
.test.js扩展来区分
您也可以使用.spec.js 扩展代替.test.js. 我更喜欢后者。
1.
2├── __tests__
3│ ├── actions
4│ │ └── gator_actions.test.js
5│ ├── components
6│ │ └── Gator.test.js
7│ ├── reducers
8│ │ └── gator_reducer.test.js
9│ └── setup
10│ └── setupEnzyme.js
11├── src
12│ ├── actions
13│ │ ├── gator_actions.js
14│ │ ├── index.js
15│ │ └── types.js
16│ ├── components
17│ │ └── Gator.js
18│ ├── reducers
19│ │ ├── gator_reducer.js
20│ │ └── index.js
21│ └── store
22│ └── index.js
23├── package.json
24└── README.md
创建 Jest & Enzyme
Jest是一个零配置的JavaScript测试平台,使开发者体验处于最前沿。
<$>[注]Enzyme是React的JavaScript测试实用程序,使您更容易声称、操纵和通过React Components的输出。
安装是
在您的终端cd到您想要测试的 React / Redux 应用程序的根部,然后运行下列命令之一,取决于您是否使用 Yarn 或 npm 来安装 Jest 作为开发者依赖。
黄金:
1$ yarn add -D jest
npm 的:
1$ npm install -D jest
安裝酶
让我们安装Enzyme,它需要几个同行依赖,以便与Jest轻松集成。
以下命令假定您正在使用 React 16. 如果您正在使用不同的版本,请确保为您正在使用的版本安装 Enzyme 适配器。
黄金:
1$ yarn add -D enzyme enzyme-adapter-react-16 enzyme-to-json
npm 的:
1$ npm install -D enzyme enzyme-adapter-react-16 enzyme-to-json
配置酶以与 Jest 合作
需要少量的锅炉板代码来整合Enzyme与Jest和React。
1[label __tests__/setup/setupEnzyme.js]
2import Enzyme from 'enzyme';
3import Adapter from 'enzyme-adapter-react-16';
将以下内容附加到您的 package.json 文件中:
1[label package.json]
2"jest": {
3 "setupTestFrameworkScriptFile": "<rootDir>__tests__/setup/setupEnzyme.js",
4 "testPathIgnorePatterns": ["<rootDir>/__tests__/setup/"]
5}
安装 Redux 测试助手
让我们继续安装一些库,以帮助我们嘲笑我们的Redux商店。
黄金:
1$ yarn add -D redux-mock-store
npm 的:
1$ npm install -D redux-mock-store
添加自定义脚本来运行测试
让我们创建一些代名词来运行我们的测试,无论是Yarn还是npm:
<$>[注]通过 npm 脚本创建副名称允许您保持在项目中运行测试的共同接口,这些测试可能具有不同的参数旗帜。
1[label package.json]
2...
3
4"scripts": {
5 "test": "jest",
6 "test:watch": "jest --watch"
7},
8
9...
你可以这样做测试:
黄金:
1// Single run
2$ yarn test
3
4// Watchmode
5$ yarn test:watch
npm 的:
1// Single run
2$ npm run test
3
4// Watchmode
5$ npm run test:watch
一般测试技巧
将测试组织成套房
将测试组织成套件非常容易使用 Jest 和 describe(). 这使您更容易维护测试。
例子:
1[label __tests__/actions/gator_actions.js]
2...
3
4describe('gator_actions', () => {
5 beforeEach(() => {
6 store.clearActions();
7 });
8 describe('eatFood', () => {
9 test('Dispatches the correct action and payload', () => {
10 store.dispatch(gatorActions.eatFood('fish'));
11 expect(store.getActions()).toMatchSnapshot();
12 });
13 });
1[label Test Results]
2PASS __tests__/actions/gator_actions.test.js
3 gator_actions
4 eatFood
5 ✓ Dispatches the correct action and payload (1ms)
6 layEggs
7 ✓ Dispatches the correct action and payload (1ms)
利用Jest的内置覆盖报告
有了 Jest,你可以通过将--coverage旗帜添加到你的测试运行脚本中来生成覆盖报告。
何时使用Snapshots
Jest提供了一个叫做Snapshot测试的功能,如果你不熟悉它是什么,你可以阅读下面的帖子或我们的: 介绍与Jest的Snapshot测试。
Snapshots 非常适合测试你不希望在未来改变或不想改变的东西. Snapshots 提供了回归测试的一种形式. 我们将使用它们来测试组件,行动和减速器,并确保它们只有在我们想要时才会改变。
何时不使用Snapshots
当你知道每次运行测试时都会有不同的东西时,或当你第一次开始写新组件、操作或减速器时,不要使用 Snapshots。
示例 1: 您有一个返回随机字符串的实用函数. 您无法使用 Snapshots 测试此功能,因为它每次都会不同. 相反,我建议测试字符串是否正确长,并根据生成的字符串类型构成正确的字符串类型。
示例 2: 您刚刚开始编写一个新组件,并正在编写测试。我建议先避免 Snapshots。
Async 测试
对于写非同步测试的一些示例,请参阅 Jest 中的非同步测试帖子。
什么是下一步?
在本系列的第2部分,我将涵盖如何测试React组件。在第3部分,我们将继续测试Redux操作。我们将在第4部分结束,在那里我将向您展示如何测试Redux减速器。