I have a React project where I am using react-loadable
to split a code at the route level. I’m also using Redux to manage the app’s store.
What I'm looking for is the way I can use Jest & Enzyme in order to test my routes (for the routes I’m using connected-react-router
and react-loadable
for splitting code).
An example of the route below:
import Loadable from 'react-loadable'; const AsyncExampleScreen = Loadable({ loader: () => import("ExampleScreen"), loading: LoadingComponent }); <Route exact path='/' component={AsyncExampleScreen} />
My index.js:
import React from 'react'; import ReactDOM from 'react-dom'; import * as serviceWorker from './serviceWorker'; import { Provider } from 'react-redux'; import configureStore, { history } from 'store'; import { ConnectedRouter } from 'connected-react-router'; import App from 'App'; const STORE = configureStore(); const render = () => { ReactDOM.render( <Provider store={STORE}> <ConnectedRouter history={history}> <App /> </ConnectedRouter> </Provider>, document.getElementById('root') ); } render();`
Example of a test (in the case I’m not using
react-loadable
for splitting at the route level)import React from 'react'; import { mount } from 'enzyme'; import { MemoryRouter } from 'react-router'; import { Provider } from 'react-redux'; import configureStore, { history } from 'store'; import App from 'App'; import Example from 'ExampleScreen'; const STORE = configureStore(); describe('routes using memory router', () => { it('should show Home component for route /', () => { const component = mount( <MemoryRouter initialEntries = {['/']} > <Provider store={STORE}> <App /> </Provider> </MemoryRouter> ); expect(component.find(Example)).toHaveLength(1); }) })