codecamp

Jest 测试 React 应用程序

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

安装

使用Create React App

如果你是 React 新手，我们建议使用 ​Create React App​。 它已经包含了可用的 Jest！ 你只需要添加 ​react-test-renderer​ 来渲染快照。

运行

  1. yarn add --dev react-test-renderer

不使用Create React App

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

运行

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

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

  1. // package.json
  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.   }
  1. // babel.config.js
  2. module.exports = {
  3.   presets: ['@babel/preset-env', '@babel/preset-react'],
  4. };

准备工作已经完成！

快照测试

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

  1. // Link.react.js
  2. import React from 'react';
  4. const STATUS = {
  5.   HOVERED: 'hovered',
  6.   NORMAL: 'normal',
  7. };
  9. export default class Link extends React.Component {
  10.   constructor(props) {
  11.     super(props);
  13.     this._onMouseEnter = this._onMouseEnter.bind(this);
  14.     this._onMouseLeave = this._onMouseLeave.bind(this);
  16.     this.state = {
  17.       class: STATUS.NORMAL,
  18.     };
  19.   }
  21.   _onMouseEnter() {
  22.     this.setState({class: STATUS.HOVERED});
  23.   }
  25.   _onMouseLeave() {
  26.     this.setState({class: STATUS.NORMAL});
  27.   }
  29.   render() {
  30.     return (
  31.       <a
  32.         className={this.state.class}
  33.         href={this.props.page || '#'}
  34.         onMouseEnter={this._onMouseEnter}
  35.         onMouseLeave={this._onMouseLeave}
  36.       >
  37.         {this.props.children}
  38.       </a>
  39.     );
  40.   }
  41. }

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

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

当你运行 ​npm test​ 或者 ​jest​，将产生一个像下面的文件：

  1. // __tests__/__snapshots__/Link.react.test.js.snap
  2. exports[`Link changes the class when hovered 1`] = `
  3. <a
  4.   className="normal"
  5.   href="http://www.facebook.com"
  6.   onMouseEnter={[Function]}
  7.   onMouseLeave={[Function]}>
  8.   Facebook
  9. </a>
  10. `;
  12. exports[`Link changes the class when hovered 2`] = `
  13. <a
  14.   className="hovered"
  15.   href="http://www.facebook.com"
  16.   onMouseEnter={[Function]}
  17.   onMouseLeave={[Function]}>
  18.   Facebook
  19. </a>
  20. `;
  22. exports[`Link changes the class when hovered 3`] = `
  23. <a
  24.   className="normal"
  25.   href="http://www.facebook.com"
  26.   onMouseEnter={[Function]}
  27.   onMouseLeave={[Function]}>
  28.   Facebook
  29. </a>
  30. `;

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

该示例代码在 examples/snapshot

快照测试与 Mocks, Enzyme 和 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.

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

  1. 渲染为文本。这样你就不会在快照中看到传递给模拟组件的道具，但它很简单：
    jest.mock('./SomeComponent',()=>()=>'SomeComponent');
  2. 呈现为自定义元素。DOM“自定义元素”不会被检查任何东西，也不应该发出警告。它们是小写的，名称中有一个破折号。
    jest.mock('./Widget',()=>()=><mock-widget />);
  3. 使用react-test-renderer. 测试渲染器不关心元素类型，并且很乐意接受例如SomeComponent. 你可以使用测试渲染器检查快照，并使用酶单独检查组件行为。
  4. 一起禁用警告（应该在你的 jest 设置文件中完成）：
    jest.mock('fbjs/lib/warning',()=>require('fbjs/lib/emptyFunction'));

        这通常不应该是你的选择，因为有用的警告可能会丢失。然而，在某些情况下，例如在测试 react-native 的组件时，我们将 react-native 标签渲染到 DOM 中，许多警告是无关紧要的。另一种选择是调整 console.warn 并抑制特定警告。

DOM测试

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

反应测试库

你必须运行​yarn add --dev @testing-library/react​才能使用 react-testing-library。

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

  1. // CheckboxWithLabel.js
  3. import React from 'react';
  5. export default class CheckboxWithLabel extends React.Component {
  6.   constructor(props) {
  7.     super(props);
  8.     this.state = {isChecked: false};
  10.     // bind manually because React class components don't auto-bind
  11.     // https://reactjs.org/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding
  12.     this.onChange = this.onChange.bind(this);
  13.   }
  15.   onChange() {
  16.     this.setState({isChecked: !this.state.isChecked});
  17.   }
  19.   render() {
  20.     return (
  21.       <label>
  22.         <input
  23.           type="checkbox"
  24.           checked={this.state.isChecked}
  25.           onChange={this.onChange}
  26.         />
  27.         {this.state.isChecked ? this.props.labelOn : this.props.labelOff}
  28.       </label>
  29.     );
  30.   }
  31. }
  1. // __tests__/CheckboxWithLabel-test.js
  2. import React from 'react';
  3. import {cleanup, fireEvent, render} from '@testing-library/react';
  4. import CheckboxWithLabel from '../CheckboxWithLabel';
  6. // Note: running cleanup afterEach is done automatically for you in @testing-library/react@9.0.0 or higher
  7. // unmount and cleanup DOM after the test is finished.
  8. afterEach(cleanup);
  10. it('CheckboxWithLabel changes the text after click', () => {
  11.   const {queryByLabelText, getByLabelText} = render(
  12.     <CheckboxWithLabel labelOn="On" labelOff="Off" />,
  13.   );
  15.   expect(queryByLabelText(/off/i)).toBeTruthy();
  17.   fireEvent.click(getByLabelText(/off/i));
  19.   expect(queryByLabelText(/on/i)).toBeTruthy();
  20. });

这个例子的代码可以在examples/react-testing-library 找到。

Enzyme

你必须运行​yarn add --dev enzyme​才能使用 Enzyme。如果你使用的是低于 15.5.0 的 React 版本，你还需要安装​react-addons-test-utils​.

让我们用Enzyme而不是反应测试库从上面重写测试。在这个例子中我们使用了 Enzyme 的浅渲染器。

  1. // __tests__/CheckboxWithLabel-test.js
  3. import React from 'react';
  4. import {shallow} from 'enzyme';
  5. import CheckboxWithLabel from '../CheckboxWithLabel';
  7. test('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()).toEqual('Off');
  13.   checkbox.find('input').simulate('change');
  15.   expect(checkbox.text()).toEqual('On');
  16. });

此示例的代码可从examples/enzyme 获得。

自定义转译器

如果你需要更高级的功能，还可以构建自己的变压器。这里没有使用 babel-jest，而是使用 babel 的一个例子：

  1. // custom-transformer.js
  2. 'use strict';
  4. const {transform} = require('@babel/core');
  5. const jestPreset = require('babel-preset-jest');
  7. module.exports = {
  8.   process(src, filename) {
  9.     const result = transform(src, {
  10.       filename,
  11.       presets: [jestPreset],
  12.     });
  14.     return result ? result.code : src;
  15.   },
  16. };

不要忘记安装@​babel/core​和​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({
  4.   presets: ['my-custom-preset'],
  5. });


Jest 疑难解答
Jest 测试 React Native 应用程序
温馨提示
下载编程狮App，免费阅读超1000+编程语言教程
取消
确定
目录

Jest 简介

Jest 指南

Jest 框架指南

Jest API参考

关闭

 MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }