使用Jest和Enzyme测试React/Redux应用程序-第1部分：安装和设置
在这个 由四部分组成的系列 中，学习如何使用 Jest 和 Enzyme 测试您的 React / Redux 应用程序，以获得强大的测试解决方案。
本系列侧重于测试并假设您具有 React / Redux 知识。
该系列
- 第1部分 : 安装和设置 ( 这个帖子 )
- 第 2 部分：测试 React 组件
- 第 3 部分：测试 Redux 操作
- 第四部分：测试Redux Reducers
推荐的文件结构
- 利用默认行为：默认情况下，Jest 在
__tests__文件夹中查找测试。 - 文件夹层次结构：镜像您的
src文件夹层次结构，以便于测试管理。 - 按类型分隔：为组件、动作和减速器保留单独的文件夹。
- Append Filenames：对于包含测试的文件，使用
.test.js扩展名来区分。
您还可以使用 .spec.js 扩展名代替 .test.js。 我更喜欢后者。
. ├── __tests__ │ ├── actions │ │ └── gator_actions.test.js │ ├── components │ │ └── Gator.test.js │ ├── reducers │ │ └── gator_reducer.test.js │ └── setup │ └── setupEnzyme.js ├── src │ ├── actions │ │ ├── gator_actions.js │ │ ├── index.js │ │ └── types.js │ ├── components │ │ └── Gator.js │ ├── reducers │ │ ├── gator_reducer.js │ │ └── index.js │ └── store │ └── index.js ├── package.json └── README.md
设置 Jest & Enzyme
Jest 是一个零配置的 JavaScript 测试平台，它使开发人员的体验处于最前沿。
Enzyme 是一个用于 React 的 JavaScript 测试实用程序，可以更轻松地断言、操作和遍历 React 组件的输出。
安装 Jest
在您的终端 cd 中到您要测试的 React / Redux 应用程序的根目录。 然后运行以下命令之一，具体取决于您使用 Yarn 还是 npm 将 Jest 安装为开发依赖项。
纱：
$ yarn add -D jest
npm：
$ npm install -D jest
安装酶
让我们安装 Enzyme，它需要几个对等依赖项才能轻松与 Jest 集成。
以下命令假设您使用的是 React 16。 如果您使用不同的版本，请确保为您使用的版本安装 Enzyme 适配器。
纱：
$ yarn add -D enzyme enzyme-adapter-react-16 enzyme-to-json
npm：
$ npm install -D enzyme enzyme-adapter-react-16 enzyme-to-json
配置 Enzyme 以使用 Jest
将 Enzyme 与 Jest 和 React 集成需要少量样板代码。
__tests__/setup/setupEnzyme.js
import Enzyme from 'enzyme'; import Adapter from 'enzyme-adapter-react-16';
将以下内容附加到您的 package.json 文件中：
包.json
"jest": {
"setupTestFrameworkScriptFile": "<rootDir>__tests__/setup/setupEnzyme.js",
"testPathIgnorePatterns": ["<rootDir>/__tests__/setup/"]
}
安装 Redux 测试助手
让我们继续安装一些库来帮助我们模拟我们的 Redux 商店。
纱：
$ yarn add -D redux-mock-store
npm：
$ npm install -D redux-mock-store
添加自定义脚本以运行测试
让我们创建一些别名来使用 Yarn 或 npm 运行我们的测试：
通过 npm 脚本创建别名可以让您在项目之间保持一个通用接口来运行测试，这些测试可能具有不同的标志和正在使用的参数。
包.json
...
"scripts": {
"test": "jest",
"test:watch": "jest --watch"
},
...
您可以像这样运行测试：
纱：
// Single run $ yarn test // Watchmode $ yarn test:watch
npm：
// Single run $ npm run test // Watchmode $ npm run test:watch
一般测试提示
将测试组织成套件
使用 Jest 和 describe() 将测试组织成套件非常容易。 这使得维护测试更容易一些。 您还将看到测试结果输出中表示的组织。
例子：
__tests__/actions/gator_actions.js
...
describe('gator_actions', () => {
beforeEach(() => {
store.clearActions();
});
describe('eatFood', () => {
test('Dispatches the correct action and payload', () => {
store.dispatch(gatorActions.eatFood('fish'));
expect(store.getActions()).toMatchSnapshot();
});
});
测试结果
PASS __tests__/actions/gator_actions.test.js
gator_actions
eatFood
✓ Dispatches the correct action and payload (1ms)
layEggs
✓ Dispatches the correct action and payload (1ms)
利用 Jest 的内置覆盖率报告
使用 Jest，您可以通过将 --coverage 标志添加到测试运行脚本来生成覆盖率报告。 这里的所有都是它的！
何时使用快照
Jest 提供了一个很棒的功能，称为快照测试。 如果您不熟悉它是什么，您可以阅读以下文章或我们的文章：Introduction to Snapshot Testing With Jest。
快照非常适合测试您不希望更改或将来不想更改的内容。 快照提供了一种回归测试的形式。 我们将使用它们来测试组件、动作和减速器，并确保它们仅在我们需要它们时才更改。
何时不使用快照
当您知道每次运行测试或第一次开始编写新组件、动作或 reducer 时都会有所不同时，不要使用快照。
示例 1：您有一个返回随机字符串的实用函数。 您无法使用快照对此进行测试，因为每次都会有所不同。 相反，我建议测试该字符串的长度是否合适，并根据生成的字符串类型由正确类型的字符组成。
示例 2：您刚刚开始编写一个新组件，并且正在编写测试。 我建议首先避免使用快照。 而是抛光组件并使其接近您所知道的。 然后切换到使用快照。
异步测试
有关编写异步测试的一些示例，请参阅 Jest 中的 异步测试帖子。
下一步是什么？
在本系列的第 2 部分中，我将介绍如何测试 React 组件。 在第 3 部分中，我们将继续测试 Redux 操作。 我们将在第 4 部分结束，我将向您展示如何测试 Redux reducer。 敬请关注！
