• React Router Testing With Jest
    • 从 React-Router 0.x 到 1.x 带来的测试配置更新
    • 示例：

    React Router Testing With Jest

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

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

    • Jest 入门文档
    • Jest ReactJS 文档
    • ReactJS TestUtils 文档

    在 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. });