我无法在测试中设置特定路径答案

【问题标题】：I am not able to set a specefic path in test我无法在测试中设置特定路径
【发布时间】：2017-03-28 17:40:57
【问题描述】：

问题： 我的 App 组件负责根据路径渲染其他组件。所以为了测试它，我需要能够“设置”路径。例如，我希望看到当路径为 /sign-up 时会呈现 SignUp 组件。

我做了什么：我想我可以使用 initialEntries 给 MemoryRouter 一个初始路径（不成功）然后我想我可以在 MemoryRouter 内的测试中直接使用 Route/Redirect设置路径，但这也不起作用。

规格：

反应 15
反应路由器 4 (react-router-dom)
Redux 3.6
Jest（create-react-app 自带的那个）
你可以在branch with the issue找到代码

【问题讨论】：

标签： testing react-router jestjs

【解决方案1】：

我花了一段时间试图自己解决这个问题。简而言之，您不能在 <MemoryRouter> 中嵌套 <Router>，因为它们都是路由器。

解决方案示例：

Routes.js - 从中删除 <BrowserRouter>，以便您可以测试您的代码。

    import React from 'react';
    import { Route, Switch } from 'react-router-dom';
    import SignUp from '../SignUp/SignUp'; //your signup component
    import Home from '../Home/Home'; //some other component for an example

    const MyRoutes = () => (
        <Switch>
            <Route path="/" component={Home} />
            <Route path="/signup" component={SignUp} />
        </Switch>
    );

    export default MyRoutes;

index.js - 在此处添加<BrowserRouter>，因为您需要将<Switch> 包装在<Router> 中。

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { BrowserRouter } from 'react-router-dom';
    import Routes from './Components/Routes/Routes';

    ReactDOM.render(
      (
        <BrowserRouter>
          <Routes />
        </BrowserRouter>
      ), document.getElementById('root')
    );

tests/Routes.test.js - 现在在此处添加<MemoryRouter> 进行测试。

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { MemoryRouter } from 'react-router-dom';
    import Routes from '../Components/Routes/Routes';

    const TestRoute = props => (
      <MemoryRouter initialEntries={props.initialEntries}>
          <Routes {...props} />
      </MemoryRouter>
    );

    it('at /signup it displays the signup page', () => {
      const div = document.createElement('div');
      ReactDOM.render(<TestRoute initialEntries={['/signup']} />, div); // render on the route "/signup"
      const elem = div.getElementsByClassName('signup')[0];
      expect(elem).not.toBe(undefined); // check an element exists with that class
      if(elem !== undefined) {
        expect(elem.innerHTML).toEqual('signup'); // check it has worked
      }
    });

换句话说，您将路由/交换机与路由器分开，以便您能够对其进行测试，因为您不能嵌套两个路由器。

【讨论】：

【解决方案2】：

我遇到了类似的问题，我发现以下方法适用于测试其行为根据路由发生变化的组件：

<MemoryRouter initialEntries={['/about']}>
  <Navigation {...props} />
</MemoryRouter>

在本例中，快照显示 .active 类名已添加到 Navigation 中的“关于”链接。

似乎不起作用的是在包含初始路由的组件/容器周围添加内存路由器。为简单起见，我将基本路由页面缩减为：

<Router>
  <div className="App">
    <Navigation app={this.props.app} />
    <Switch>
      <Route exact path="/" component={Home} />
      <Route exact path="/about" component={About} />
      <Route exact path="/login" render={() => <Login app={this.props.app} />} />
      <Route exact path="/signup" render={() => <Signup app={this.props.app} />} />
      <Route exact path="/account" render={() => <Account app={this.props.app} />} />
      <Route component={ErrorPage} />
    </Switch>
  </div>
</Router>

react-router 团队在current testing docs 中声明：

我们有很多测试表明当位置改变时路线可以工作，所以你可能不需要测试这些东西。

【讨论】：