3

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);
        })
    })
    
Hsaido
  • 125
  • 12

0 Answers0