Testing 测试

React Router relies on React context to work. This affects how you can test your components that use our components.

React Router依赖于React。这会影响你如何通过使用我们的组件来测试你的组件。

Context 上下文

If you try to unit test one of your components that renders a <Link> or a <Route>, etc. you’ll get some errors and warnings about context. While you may be tempted to stub out the router context yourself, we recommend you wrap your unit test in a <StaticRouter> or a <MemoryRouter>. Check it out:

如果你尝试单元测试你渲染的<Link>或者<Router>组件，你会得到一些上下文的错误和警告信息。虽然你可能会找出自己的路由上下文，我们推荐你将你的单元测试包裹在<StaticRouter>或者<MemoryRouter>中。来看看:

  1. class Sidebar extends Component {
  2.   // ...
  3.   render() {
  4.     return (
  5.       <div>
  6.         <button onClick={this.toggleExpand}>
  7.           expand
  8.         </button>
  9.         <ul>
  10.           {users.map(user => (
  11.             <li>
  12.                <Link to={user.path}>
  13.                  {user.name}
  14.                </Link>
  15.             </li>
  16.           ))}
  17.         </ul>
  18.       </div>
  19.     )
  20.   }
  21. }
  23. // broken
  24. test('it expands when the button is clicked', () => {
  25.   render(
  26.     <Sidebar/>
  27.   )
  28.   click(theButton)
  29.   expect(theThingToBeOpen)
  30. })
  32. // fixed!
  33. test('it expands when the button is clicked', () => {
  34.   render(
  35.     <MemoryRouter>
  36.       <Sidebar/>
  37.     </MemoryRouter>
  38.   )
  39.   click(theButton)
  40.   expect(theThingToBeOpen)
  41. })

That’s all there is to it. 这就是所有的示例。

这就是它的全部。

Starting at specific routes | 从特定的路由开始

<MemoryRouter> 支持initialEntries 和 initialIndex 属性。，因此你可以从一个特定的地址（location）来启动你的app（或者是app的一个小部分）。 

  1. test('current user is active in sidebar', () => {
  2.   render(
  3.     <MemoryRouter initialEntries={[ '/users/2' ]}>
  4.       <Sidebar/>
  5.     </MemoryRouter>
  6.   )
  7.   expectUserToBeActive(2)
  8. })

Navigating

当地址（location）发生变化的时候，我们会对路由进行大量的测试，所以你可能没有必要对这个（Navigating ）进行测试。但是如果你必须这样做，基于一切都在渲染中发生，我们可以对此做一些聪明的事情：

导航

当地址变化时我们有许多测试路由的工作，因此你可能不需要测试这个东西。但是如果你必须这样做，一切发生在渲染的时候，我们可以聪明一点这样做：

  1. import { render, unmountComponentAtNode } from 'react-dom'
  2. import React from 'react'
  3. import { Route, Link, MemoryRouter } from 'react-router-dom'
  4. import { Simulate } from 'react-addons-test-utils'
  7. // 把整个app都放在一个MemoryRouter里面渲染的其中一个方法是
  8. // 把他们都放进一个要执行的步骤列表里面，
  9. // 当地址（location）发生变化的时候，
  10. // 它就会连同`match`， `location`, 和 `history`一起被回调，
  11. // 因此，你可以控制整个流程和做断言。
  13. const renderTestSequence = ({
  14.   initialEntries,
  15.   initialIndex,
  16.   subject: Subject,
  17.   steps
  18. }) => {
  19.   const div = document.createElement('div')
  21.   class Assert extends React.Component {
  23.     componentDidMount() {
  24.       this.assert()
  25.     }
  27.     componentDidUpdate() {
  28.       this.assert()
  29.     }
  31.     assert() {
  32.       const nextStep = steps.shift()
  33.       if (nextStep) {
  34.         nextStep({ ...this.props, div })
  35.       } else {
  36.         unmountComponentAtNode(div)
  37.       }
  38.     }
  40.     render() {
  41.       return this.props.children
  42.     }
  43.   }
  45.   class Test extends React.Component {
  46.     render() {
  47.       return (
  48.         <MemoryRouter
  49.           initialIndex={initialIndex}
  50.           initialEntries={initialEntries}
  51.         >
  52.           <Route render={(props) => (
  53.             <Assert {...props}>
  54.               <Subject/>
  55.             </Assert>
  56.           )}/>
  57.         </MemoryRouter>
  58.       )
  59.     }
  60.   }
  62.   render(<Test/>, div)
  63. }
  65. // 我们的主题是这个App，但是你也可以测试你的应用的一个小部分
  66. const App = () => (
  67.   <div>
  68.     <Route exact path="/" render={() => (
  69.       <div>
  70.         <h1>Welcome</h1>
  71.       </div>
  72.     )}/>
  73.     <Route path="/dashboard" render={() => (
  74.       <div>
  75.         <h1>Dashboard</h1>
  76.         <Link to="/" id="click-me">Home</Link>
  77.       </div>
  78.     )}/>
  79.   </div>
  80. )
  82. // 实际测试！
  83. it('navigates around', (done) => {
  85.   renderTestSequence({
  87.     // 告诉它你正在测试的 subject
  88.     subject: App,
  90.     // 以及每次地址（location）改变时执行的步骤
  91.     steps: [
  93.       // 初始渲染
  94.       ({ history, div }) => {
  95.         // assert the screen says what we think it should
  96.         //断言屏幕的输出和我们期望的输出是否一样
  97.         console.assert(div.innerHTML.match(/Welcome/))
  99.         // 现在我们可以强制导航作为测试
  100.         history.push('/dashboard')
  101.       },
  103.       // 从新的地址（location）发起二次渲染
  104.       ({ div }) => {
  105.         console.assert(div.innerHTML.match(/Dashboard/))
  108.         //或者我们可以模拟点击链接，而不使用  history.push
  109.         Simulate.click(div.querySelector('#click-me'), {
  110.           button: 0
  111.         })
  112.       },
  114.       // 最终渲染
  115.       ({ location }) => {
  116.         console.assert(location.pathname === '/')
  118.         //你需要在这里写下 `done()`，如果你从未这样做，你的测试是失败的。 
  119.         done()
  120.       }
  121.     ]
  122.   })
  123. })