Использование Jest для тестирования React Route

Question

Я абсолютно новичок в тестировании. Сейчас я пытаюсь протестировать реакцию Roure. Как правильно это проверить? Регистрация. js

import React from "react";
import { Redirect, Route, Switch } from "react-router-dom";

import user from "./user";
import employee from "./employee";

const Registers = ({ match }) => (
  <div className="dashboard-wrapper">
    <Switch>
      <Redirect exact from={`${match.url}/`} to={`${match.url}/user`} />
      <Route path={`${match.url}/user`} component={user} />
      <Route path={`${match.url}/employee`} component={employee} />
      <Redirect to="/error" />
    </Switch>
  </div>
);
export default Registers;

Попытка проверить таким образом.

   Enzyme.configure({ adapter: new Adapter() });
    test('invalid path should redirect to 404', () => {
    const wrapper = mount(
     <MemoryRouter initialEntries={[ '/user' ]}>
       <Registers/>
     </MemoryRouter>
   );
  expect(wrapper.find(user)).toHaveLength(0);
  expect(wrapper.find(employee)).toHaveLength(1);
});

Answer 1

• Сначала вам нужно обернуть оператор Switch с помощью Browser Router
• Второй Вам нужно смоделировать Browser Router.

Mock Browser Router по пути

" __mocks__/react-router-dom.js "

import React from 'react';
const rrd = require('react-router-dom');
// Just render plain div with its children
rrd.BrowserRouter = ({children}) => <div>{children}</div>
module.exports = rrd;

Тест как

test('invalid path should redirect to 404', () => {
  const wrapper = mount(
    <MemoryRouter initialEntries={[ '/user' ]}>
      <App/>
    </MemoryRouter>
  );
  expect(wrapper.find(user)).toHaveLength(0);
  expect(wrapper.find(employee)).toHaveLength(1);
});