testing - 我无法在测试中设置特定路径

Question

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

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

规范:

• react 15
• React 路由器 4(react-router-dom)
• 终极版 3.6
• Jest(create-react-app 自带的)
• 您可以在 branch with the issue 上找到代码

Answer 1

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

解决方案示例:

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

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