How can I fix this broken unit test after adding Redux to my ReactJS app?

Question

My app runs fine and here is the main file:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from '../src/store/store';

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);

I originally used react create an app to make my project as found here: https://github.com/facebookincubator/create-react-app and then I added Redux to my app.

After I added Redux to my app for state management, the original unit test broke.

Here is the test:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
});

How can I fix the unit test so that it passes?

What is the unit test error? Also post the contents of the 'App' file — Martin Dawson
– Martin Dawson, Commented Mar 11, 2017 at 16:26

Michael Peyper · Accepted Answer · 2017-03-13 12:07:22Z

You haven't given much detail about the error you are getting, but I'll presume it's to do with not having a store for a connected component.

You can use something like redux-mock-store to create an expected state and then wrap App in a Provider just like you did in the main file. Something like

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from 'redux-mock-store'
import App from './App';

const middlewares = []
const mockStore = configureStore(middlewares)

it('renders without crashing', () => {

  const initialState = { /*expected state goes here */ }
  const store = mockStore(initialState)

  const div = document.createElement('div');
  ReactDOM.render(<Provider store={store}><App /></Provider>, div);
});

NOTE: I also just want to warn you that this test might be useful to you now, but the more complex your app gets, the harder it will be to maintain as more and more state is required to render. You may want to look into tools like enzyme and using shallow renders of individual components to test you app instead.

I Am · Accepted Answer · 2017-03-13 16:21:32Z

0

When you add Redux to your app, you will need to initialize your app in test with mock store. Much the same what Michael said.

answered Mar 13, 2017 at 16:21

I Am

331 silver badge4 bronze badges

Collectives™ on Stack Overflow

How can I fix this broken unit test after adding Redux to my ReactJS app?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related