React Router Testing With Jest

从 React Router 1.x 版本开始，测试变得简单多了。想知道 React Router 以前版本如何测试，参阅 旧的测试文档。

在开始之前，建议你阅读以下前两个教程：

在 React-Router 1.x 中编写测试会很顺利。如果遇到问题，后面会有解法。很多用户在升级旧的 react-router 0.x 项目时会遇到一些问题。

从 React-Router 0.x 到 1.x 带来的测试配置更新

首先，确保你使用的包至少是以下版本：

  • "react": "^0.14.0"
  • "react-dom": "^0.14.0"
  • "react-router": "^1.0.0"
  • "react-addons-test-utils": "^0.14.0"
  • "jest-cli": "^0.5.10"
  • "babel-jest": "^5.3.0"

另外，确保你使用的是 node 4.x

在以前的配置中，react-tools 是必须的。但现在不是了。你要把它从 package.json 和环境中删除。

  1. "react-tools": "~0.13.3",

最后，你有任何类似如下的，需要将：

  1. var React = require('react/addons');
  2. var TestUtils = React.addons.TestUtils;

替换成：

  1. var TestUtils = require('react-addons-test-utils');
  2. var ReactDOM = require('react-dom');
  3. var React = require('react');

不要忘记执行 npm clean、install 等操作。并且确保把 react-addons-test-utils 和 react-dom 加到 unmocked path（非模拟路径）中。

  1.   ...
  2.   "unmockedModulePathPatterns": [
  3.     "./node_modules/react",
  4.     "./node_modules/react-dom",
  5.     "./node_modules/react-addons-test-utils",
  6.   ],
  7.   ...

最后，确保使用 babel-jest 做为脚本预处理工具

  1.   ...
  2.   "scriptPreprocessor": "./node_modules/babel-jest",
  3.   ...

示例：

一个组件：

  1. //../components/BasicPage.js
  3. let React = require('react');
  5. import { Button } from 'react-bootstrap';
  6. import { Link } from 'react-router';
  8. let BasicPage =
  9.   React.createClass({
  10.     propTypes: {
  11.       authenticated: React.PropTypes.bool,
  12.     },
  13.     render:function(){
  14.       let mainContent;
  15.       let authenticated = this.props.authenticated;
  17.       if(authenticated) {
  18.         mainContent = (
  19.           <div>
  20.             <Link to="/admin"><Button bsStyle="primary">Login</Button></Link>
  21.           </div>
  22.         );
  23.       } else {
  24.         mainContent = (
  25.           <div>
  26.             <Link to="/admin"><Button bsStyle="primary">Login</Button></Link>
  27.           </div>
  28.         );
  30.       }
  32.       return (
  33.         <div>
  34.           {mainContent}
  35.         </div>
  36.       );
  37.     },
  38.   });
  39. module.exports = BasicPage;

组件测试代码：

  1. //../components/__tests__/BasicPage-test.js
  3. // 注意：不能使用 ES6 模块语法，因为
  4. // jest.dontMock & jest.autoMockOff()
  5. // 还不支持 ES6 模块
  7. jest.dontMock('../BasicPage');
  9. describe('BasicPage', function() {
  10.   let BasicPage = require('../BasicPage');
  11.   let TestUtils = require('react-addons-test-utils');
  12.   let ReactDOM = require('react-dom');
  13.   let React = require('react');
  15.   it('renders the Login button if not logged in', function() {
  16.     let page = TestUtils.renderIntoDocument(<BasicPage />);
  17.     let button = TestUtils.findRenderedDOMComponentWithTag(page, 'button');
  18.     expect(ReactDOM.findDOMNode(button).textContent).toBe('Login');
  19.   });
  21.   it('renders the Account button if logged in', function() {
  22.     let page = TestUtils.renderIntoDocument(<BasicPage authenticated={true} />);
  23.     let button = TestUtils.findRenderedDOMComponentWithTag(page, 'button');
  24.     expect(ReactDOM.findDOMNode(button).textContent).toBe('Your Account');
  25.   });
  26. });