Version: 29.7

测试 React 应用

在 Facebook，我们使用 Jest 来测试 React 应用。

设置

使用 Create React App 设置

如果你是 React 新手，我们建议使用创建反应应用。它已准备好使用并且与 Jest 一起发货！你只需要添加 react-test-renderer 即可渲染快照。

运行

npm
Yarn
pnpm

npm install --save-dev react-test-renderer

yarn add --dev react-test-renderer

pnpm add --save-dev react-test-renderer

不使用 Create React App 进行设置

如果你有现有的应用，则需要安装一些软件包以使所有内容都能正常工作。我们使用 babel-jest 包和 react babel 预设来转换测试环境中的代码。另请参阅使用 Babel。

运行

npm
Yarn
pnpm

npm install --save-dev jest babel-jest @babel/preset-env @babel/preset-react react-test-renderer

yarn add --dev jest babel-jest @babel/preset-env @babel/preset-react react-test-renderer

pnpm add --save-dev jest babel-jest @babel/preset-env @babel/preset-react react-test-renderer

你的 package.json 应该看起来像这样（其中 <current-version> 是包的实际最新版本号）。请添加脚本和 jest 配置条目：

{
  "dependencies": {
    "react": "<current-version>",
    "react-dom": "<current-version>"
  },
  "devDependencies": {
    "@babel/preset-env": "<current-version>",
    "@babel/preset-react": "<current-version>",
    "babel-jest": "<current-version>",
    "jest": "<current-version>",
    "react-test-renderer": "<current-version>"
  },
  "scripts": {
    "test": "jest"
  }
}

babel.config.js
module.exports = {
  presets: [
    '@babel/preset-env',
    ['@babel/preset-react', {runtime: 'automatic'}],
  ],
};

你就可以出发了！

快照测试

让我们为渲染超链接的 Link 组件创建一个快照测试：

Link.js
import {useState} from 'react';

const STATUS = {
  HOVERED: 'hovered',
  NORMAL: 'normal',
};

export default function Link({page, children}) {
  const [status, setStatus] = useState(STATUS.NORMAL);

  const onMouseEnter = () => {
    setStatus(STATUS.HOVERED);
  };

  const onMouseLeave = () => {
    setStatus(STATUS.NORMAL);
  };

  return (
    <a
      className={status}
      href={page || '#'}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
    >
      {children}
    </a>
  );
}

注意

示例是使用函数组件，但类组件可以以相同的方式进行测试。参见 React：函数和类组件。 提醒事项 对于 Class 组件，我们希望 Jest 用于直接测试 props 而不是方法。

现在让我们使用 React 的测试渲染器和 Jest 的快照功能与组件交互并捕获渲染的输出并创建快照文件：

Link.test.js
import renderer from 'react-test-renderer';
import Link from '../Link';

it('changes the class when hovered', () => {
  const component = renderer.create(
    <Link page="http://www.facebook.com">Facebook</Link>,
  );
  let tree = component.toJSON();
  expect(tree).toMatchSnapshot();

  // manually trigger the callback
  renderer.act(() => {
    tree.props.onMouseEnter();
  });
  // re-rendering
  tree = component.toJSON();
  expect(tree).toMatchSnapshot();

  // manually trigger the callback
  renderer.act(() => {
    tree.props.onMouseLeave();
  });
  // re-rendering
  tree = component.toJSON();
  expect(tree).toMatchSnapshot();
});

当你运行 yarn test 或 jest 时，将生成如下输出文件：

__tests__/__snapshots__/Link.test.js.snap
exports[`changes the class when hovered 1`] = `
<a
  className="normal"
  href="http://www.facebook.com"
  onMouseEnter={[Function]}
  onMouseLeave={[Function]}
>
  Facebook
</a>
`;

exports[`changes the class when hovered 2`] = `
<a
  className="hovered"
  href="http://www.facebook.com"
  onMouseEnter={[Function]}
  onMouseLeave={[Function]}
>
  Facebook
</a>
`;

exports[`changes the class when hovered 3`] = `
<a
  className="normal"
  href="http://www.facebook.com"
  onMouseEnter={[Function]}
  onMouseLeave={[Function]}
>
  Facebook
</a>
`;

下次运行测试时，渲染的输出将与之前创建的快照进行比较。快照应与代码更改一起提交。当快照测试失败时，你需要检查它是有意的还是无意的更改。如果需要进行更改，你可以使用 jest -u 调用 Jest 来覆盖现有快照。

此示例的代码可在 examples/snapshot 处获取。

使用 Mocks、Enzyme 和 React 16+ 进行快照测试

使用 Enzyme 和 React 16+ 时，关于快照测试有一个警告。如果你使用以下样式模拟模块：

jest.mock('../SomeDirectory/SomeComponent', () => 'SomeComponent');

然后你会在控制台看到警告：

Warning: <SomeComponent /> is using uppercase HTML. Always use lowercase HTML tags in React.

# Or:
Warning: The tag <SomeComponent> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

React 16 由于检查元素类型的方式而触发这些警告，并且模拟模块未通过这些检查。你的选择是：

渲染为文本。这样你就不会在快照中看到传递给模拟组件的 props，但它很简单：
```
jest.mock('./SomeComponent', () => () => 'SomeComponent');
```
渲染为自定义元素。 DOM "自定义元素" 不会检查任何内容，因此不应发出警告。它们是小写字母，名称中带有破折号。
```
jest.mock('./Widget', () => () => <mock-widget />);
```
使用 react-test-renderer。测试渲染器不关心元素类型，并且会很乐意接受例如 SomeComponent。你可以使用测试渲染器检查快照，并使用 Enzyme 单独检查组件行为。
一起禁用警告（应该在你的 jest 设置文件中完成）：
```
jest.mock('fbjs/lib/warning', () => require('fbjs/lib/emptyFunction'));
```
这通常不应该是你的选择，因为有用的警告可能会丢失。然而，在某些情况下，例如在测试 react-native 的组件时，我们将 react-native 标签渲染到 DOM 中，并且许多警告是无关紧要的。另一种选择是调整 console.warn 并抑制特定警告。

DOM 测试

如果你想断言并操作渲染的组件，你可以使用 @testing-library/react、Enzyme 或 React 的 TestUtils。以下示例使用 @testing-library/react。

@testing-library/react

npm
Yarn
pnpm

npm install --save-dev @testing-library/react

yarn add --dev @testing-library/react

pnpm add --save-dev @testing-library/react

让我们实现一个在两个标签之间交换的复选框：

CheckboxWithLabel.js
import {useState} from 'react';

export default function CheckboxWithLabel({labelOn, labelOff}) {
  const [isChecked, setIsChecked] = useState(false);

  const onChange = () => {
    setIsChecked(!isChecked);
  };

  return (
    <label>
      <input type="checkbox" checked={isChecked} onChange={onChange} />
      {isChecked ? labelOn : labelOff}
    </label>
  );
}

__tests__/CheckboxWithLabel-test.js
import {cleanup, fireEvent, render} from '@testing-library/react';
import CheckboxWithLabel from '../CheckboxWithLabel';

// Note: running cleanup afterEach is done automatically for you in @testing-library/react@9.0.0 or higher
// unmount and cleanup DOM after the test is finished.
afterEach(cleanup);

it('CheckboxWithLabel changes the text after click', () => {
  const {queryByLabelText, getByLabelText} = render(
    <CheckboxWithLabel labelOn="On" labelOff="Off" />,
  );

  expect(queryByLabelText(/off/i)).toBeTruthy();

  fireEvent.click(getByLabelText(/off/i));

  expect(queryByLabelText(/on/i)).toBeTruthy();
});

此示例的代码可在 examples/react-testing-library 处获取。

定制转换器

如果你需要更高级的功能，你还可以构建自己的转换器。下面是使用 @babel/core 的示例，而不是使用 babel-jest：

custom-transformer.js
'use strict';

const {transform} = require('@babel/core');
const jestPreset = require('babel-preset-jest');

module.exports = {
  process(src, filename) {
    const result = transform(src, {
      filename,
      presets: [jestPreset],
    });

    return result || src;
  },
};

不要忘记安装 @babel/core 和 babel-preset-jest 软件包才能使该示例正常工作。

要使其与 Jest 配合使用，你需要使用以下命令更新 Jest 配置： "transform": {"\\.js$": "path/to/custom-transformer.js"}。

如果你想构建一个支持 babel 的转换器，你还可以使用 babel-jest 来编写一个转换器并传入你的自定义配置选项：

const babelJest = require('babel-jest');

module.exports = babelJest.createTransformer({
  presets: ['my-custom-preset'],
});

详细信息请参见专用文档。

设置​

使用 Create React App 设置​

不使用 Create React App 进行设置​

快照测试​

使用 Mocks、Enzyme 和 React 16+ 进行快照测试​

DOM 测试​

@testing-library/react​

定制转换器​

设置