score:4

Accepted answer

I assume that by <Router> you are referring to BrowserRouter. The best way is to isolate the wrapped component and test it with testing alternatives.

For example assume that you want to test that:

// App.jsx

export const App = () => 
<Router>
  <ReduxProvider>
     <AppInner>
  </ReduxProvider>
</Router>

My suggestion is to test AppInner with testing env of Router & ReduxProvider.

In tests:

// AppInner.test.jsx

import {mount} from 'enzyme';
import {MemoryRouter} from 'react-router';
describe('AppInner', () => {
   it('should do something', () => {
      const TestingComponent = () =>
      <MemoryRouter>
         <ReduxProvider>
            <AppInner />
         <ReduxProvider>
      <MemoryRouter>;
      const component = mount(TestingComponent);
   });
})

Pay attention that I've wrapped the AppInner with MemoryRouter, it allows your mimic router but without the dependency of the browser.

For more info you can read the testing section of react-router;


Related Query

More Query from same tag