测试React程序

    如果你是 React 新手，我们建议使用 Create React App。 它已经包含了 ！ 您只需要添加 来渲染快照。

    运行

    • npm
    • Yarn
    1. yarn add --dev react-test-renderer

    如果你已经有一个应用，你仅需要安装一些包来使他们运行起来。 我们使用babel-jest包和babel-preset-react，从而在测试环境中转换我们代码。 可参考

    运行

    • npm
    • Yarn
    1. npm install --save-dev jest babel-jest @babel/preset-env @babel/preset-react react-test-renderer
    1. yarn add --dev jest babel-jest @babel/preset-env @babel/preset-react react-test-renderer

    你的package.json文件应该像下面这样(<current-version>是当前包的最新版本号) 请添加脚本项目和 jest 配置： 请添加脚本项目和 jest 配置：

    1. {
    2.   "dependencies": {
    3.     "react": "<current-version>",
    4.     "react-dom": "<current-version>"
    5.   },
    6.   "devDependencies": {
    7.     "@babel/preset-env": "<current-version>",
    8.     "@babel/preset-react": "<current-version>",
    9.     "babel-jest": "<current-version>",
    10.     "jest": "<current-version>",
    11.     "react-test-renderer": "<current-version>"
    12.   },
    13.   "scripts": {
    14.     "test": "jest"
    15.   }
    16. }

    babel.config.js

    1. module.exports = {
    2.   presets: [
    3.     '@babel/preset-env',
    4.     ['@babel/preset-react', {runtime: 'automatic'}],
    5.   ],
    6. };

    准备工作已经完成！

    让我们来为一个渲染超链接的 Link 组件创建

    Link.js

    1. import {useState} from 'react';
    3. const STATUS = {
    4.   HOVERED: 'hovered',
    5.   NORMAL: 'normal',
    6. };
    8. export default function Link({page, children}) {
    9.   const [status, setStatus] = useState(STATUS.NORMAL);
    11.   const onMouseEnter = () => {
    12.     setStatus(STATUS.HOVERED);
    13.   };
    15.   const onMouseLeave = () => {
    16.     setStatus(STATUS.NORMAL);
    17.   };
    19.   return (
    20.     <a
    21.       className={status}
    22.       href={page || '#'}
    23.       onMouseEnter={onMouseEnter}
    24.     >
    25.       {children}
    26.     </a>
    27.   );
    28. }

    note

    Examples are using Function components, but Class components can be tested in the same way. 相关区别请查看：React: Function and Class Components. 注意 ，我们希望对于Class组件，Jest应该更多的去测试Props而不是Class中的函数。

    现在，使用React的test renderer和Jest的快照特性来和组件交互，获得渲染结果和生成快照文件：

    Link.test.js

    1. import renderer from 'react-test-renderer';
    2. import Link from '../Link';
    4. it('changes the class when hovered', () => {
    5.   const component = renderer.create(
    6.     <Link page="http://www.facebook.com">Facebook</Link>,
    7.   );
    8.   let tree = component.toJSON();
    9.   expect(tree).toMatchSnapshot();
    11.   // manually trigger the callback
    12.   renderer.act(() => {
    13.     tree.props.onMouseEnter();
    14.   });
    15.   // re-rendering
    16.   tree = component.toJSON();
    17.   expect(tree).toMatchSnapshot();
    19.   // manually trigger the callback
    20.   renderer.act(() => {
    21.     tree.props.onMouseLeave();
    22.   });
    23.   // re-rendering
    24.   tree = component.toJSON();
    25.   expect(tree).toMatchSnapshot();
    26. });

    __tests__/__snapshots__/Link.test.js.snap

    下次你运行测试时，渲染的结果将会和之前创建的快照进行比较。 代码变动时，快照也应该被提交。 当快照测试失败，你需要去检查是否是你想要或不想要的变动。 如果变动符合预期，你可以通过jest -u调用Jest从而重写存在的快照。

    The code for this example is available at .

    Snapshot Testing with Mocks, Enzyme and React 16+

    快照测试在 Enzyme 和 React 16+ 中使用时有一个注意事项。 如果您使用以下方式模拟模块：

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

    然后您将在控制台中看到警告：

    1. Warning: <SomeComponent /> is using uppercase HTML. Always use lowercase HTML tags in React.
    3. # Or:
    4. Warning: The tag <SomeComponent> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter. Always use lowercase HTML tags in React.
    6. # Or:
    7. 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 触发这些警告，取决于它是如何检查元素类型的，在这些检查中模拟模块会失败。 您可以：

    1. 渲染为纯文本。 这种方式你看不到传递给模拟组件的Props，但最直观。

    jest.mock(‘./SomeComponent’, () => () => ‘SomeComponent’);

    1. ```

    1. 渲染为自定义元素。 DOM的“自定义元素“不会检查任何属性，所以也不会触发warnings。 他们都是小写的、中划线分割的单词。

      1. jest.mock('./Widget', () => () => <mock-widget />);

    2. 使用 react-test-renderer。 这个test渲染器不校验元素类型，并乐意接受SomeComponent作为参数。 你可以使用react-test-renderer进行快照检测，使用单独使用Enzyme进行组件行为监测。

    3. 禁用所有警告（在jest setup file中）：

      1. jest.mock('fbjs/lib/warning', () => require('fbjs/lib/emptyFunction'));

      这是下策，因为所有有用的警告也都会丢失。 不过，依然有其适用场景。例如我们需要测试 react-native的组件编译为DOM，很多警告是无关紧要的。 另一个方式是使用控制台忽略特定的警告信息。

    If you’d like to assert, and manipulate your rendered components you can use react-testing-library, , or React’s TestUtils. 接下来我们讲两个 react-testing-library 和Enzyme的例子。

    react-testing-library

    • npm
    • Yarn
    1. npm install --save-dev @testing-library/react

    CheckboxWithLabel.js

    1. import {useState} from 'react';
    3. export default function CheckboxWithLabel({labelOn, labelOff}) {
    4.   const [isChecked, setIsChecked] = useState(false);
    6.   const onChange = () => {
    7.     setIsChecked(!isChecked);
    8.   };
    10.   return (
    11.       <input type="checkbox" checked={isChecked} onChange={onChange} />
    12.       {isChecked ? labelOn : labelOff}
    13.     </label>
    14.   );
    15. }

    __tests__/CheckboxWithLabel-test.js

    1. import {cleanup, fireEvent, render} from '@testing-library/react';
    4. // Note: running cleanup afterEach is done automatically for you in @testing-library/react@9.0.0 or higher
    5. // unmount and cleanup DOM after the test is finished.
    6. afterEach(cleanup);
    8. it('CheckboxWithLabel changes the text after click', () => {
    9.   const {queryByLabelText, getByLabelText} = render(
    10.     <CheckboxWithLabel labelOn="On" labelOff="Off" />,
    11.   );
    13.   expect(queryByLabelText(/off/i)).toBeTruthy();
    15.   fireEvent.click(getByLabelText(/off/i));
    17.   expect(queryByLabelText(/on/i)).toBeTruthy();
    18. });

    The code for this example is available at examples/react-testing-library.

    Enzyme

    • npm
    • Yarn
    1. npm install --save-dev enzyme
    1. yarn add --dev enzyme

    如果你的React版本低于15.5.0，则也需要再安装react-addons-test-utils

    我们使用react-testing-library的方式重写一遍上面的用例。 We use Enzyme’s shallow renderer in this example.

    __tests__/CheckboxWithLabel-test.js

    1. import Enzyme, {shallow} from 'enzyme';
    2. import Adapter from 'enzyme-adapter-react-16';
    3. import CheckboxWithLabel from '../CheckboxWithLabel';
    5. Enzyme.configure({adapter: new Adapter()});
    7. it('CheckboxWithLabel changes the text after click', () => {
    8.   // Render a checkbox with label in the document
    9.   const checkbox = shallow(<CheckboxWithLabel labelOn="On" labelOff="Off" />);
    11.   expect(checkbox.text()).toBe('Off');
    13.   checkbox.find('input').simulate('change');
    15.   expect(checkbox.text()).toBe('On');
    16. });

    The code for this example is available at .

    如果你需要更多高级功能，你也可以自定义你的转译器。 If you need more advanced functionality, you can also build your own transformer. Instead of using babel-jest, here is an example of using @babel/core:

    custom-transformer.js

    1. 'use strict';
    3. const {transform} = require('@babel/core');
    4. const jestPreset = require('babel-preset-jest');
    6. module.exports = {
    7.   process(src, filename) {
    8.     const result = transform(src, {
    9.       filename,
    10.       presets: [jestPreset],
    11.     });
    13.     return result || src;
    14.   },
    15. };

    别忘记安装 @babel/core and babel-preset-jest。

    为了使这个与 Jest 一起工作，您需要更新您的 Jest 配置："transform": {"\\.js$": "path/to/custom-transformer.js"}。

    如果你需要一个babel支持的转译器，你还需要安装babel-jest来协助生成你的转译器配置。

    1. const babelJest = require('babel-jest');
    3. module.exports = babelJest.createTransformer({

    详情见 。