Как смоделировать BrowserRouter response-router-dom, используя jest

Question

У меня есть эти компоненты, которые отображают маршруты приложения: https://jsbin.com/bahaxudijo/edit?js, Я пытаюсь смоделировать BrowserRouter и Route, чтобы выполнить тест, это мой тест:

import React from 'react';
import renderer from 'react-test-renderer';

import Router from '../../../components/Router/Component';

jest.mock('react-router-dom', () => ({
  BrowserRouter: ({ children }) => <div>{children}</div>,
  Route: ({ children }) => <div>{children}</div>,
}));

jest.mock('../../../components/Nav/index', () => '<MockedNav />');
jest.mock('../../../components/ScheduleManager/index', () => '<MockedScheduleManager />');

const props = {
  token: '',
  loginStaff: jest.fn(),
};

describe('<Router />', () => {
  describe('When is passed a token', () => {
    it('renders the correct route', () => {
      const component = renderer.create(<Router {...props} />);
      expect(component).toMatchSnapshot();
    });
  });
});

Но я ошибаюсь над BrowserRouter и Route, поэтому тест проходит, но снимки - это только пустые деления.Как правильно издеваться над BrowserRouter и Route?

Answer 1

const reactRouter = require('react-router-dom');
const { MemoryRouter } = reactRouter;
const MockBrowserRouter = ({ children }) => (
  <MemoryRouter initialEntries={['/']}>
    { children }
  </MemoryRouter>
);
MockBrowserRouter.propTypes = { children: PropTypes.node.isRequired };
reactRouter.BrowserRouter = MockBrowserRouter;