Testing 我无法在测试中设置specefic路径

问题：我的应用程序组件负责根据路径呈现其他组件。所以为了测试它，我需要能够“设置”路径。e、 g我希望看到在路径为/sign-up时呈现SignUp组件

我所做的：我想我可以使用initialEntries为MemoryRouter提供一个初始路径（不成功），然后我想我可以在MemoryRouter内部的测试中直接使用Route/Redirect来设置路径，但这也不起作用

规格：

• 反应15
• 反应路由器4（反应路由器dom）
• Redux 3.6
• Jest（CreateReact应用程序附带的一个）
• 你可以在地图上找到密码

---

我遇到了一个类似的问题，我发现以下方法适用于测试其行为随路径变化的组件：

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

react路由器团队声明如下：

我们做了很多测试，当位置改变时，路线会起作用， 所以你可能不需要测试这些东西

---

我花了一段时间试图自己弄明白这一点。 简单地说，您不能在

中嵌套

，因为它们都是路由器

解决方案示例：

Routes.js-从中删除

，以便测试代码。

    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;

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

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

从“React”导入React；
从“react router dom”导入{Route，Switch}；
从“../SignUp/SignUp”导入注册//您的注册组件
从“../Home/Home”导入Home//以其他组件为例
常量MyRoutes=（）=>(
);
导出默认路径；

index.js-在此处添加

，因为您需要将

包装到

中

    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;

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

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

从“React”导入React；
从“react dom”导入react dom；
从“react router dom”导入{BrowserRouter}；
从“./Components/Routes/Routes”导入路由；
ReactDOM.render(
(
)，document.getElementById（'root'））
);

tests/Routes.test.js-现在将

添加到此处进行测试。

    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;

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

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

从“React”导入React；
从“react dom”导入react dom；
从'react router dom'导入{MemoryRouter}；
从“../Components/Routes/Routes”导入路由；
const TestRoute=props=>(
);
它（'at/signup它显示注册页面'，（）=>{
const div=document.createElement（'div'）；
ReactDOM.render（，div）；//在路由上渲染“/注册”
const elem=div.getElementsByClassName（'signup'）[0]；
expect（elem）.not.toBe（未定义）；//检查该类中是否存在元素
如果（元素！==未定义）{
expect（elem.innerHTML）.toEqual（'signup'）；//检查它是否有效
}
});

换句话说，您将路由/交换机与路由器分离，以便能够测试它，因为您不能嵌套两个路由器