How can I test React redux app by mocking states and pass state to a component

171 Views Asked by At

I want to mock state from the redux store and test them using jest

import React from 'react';
import { mount, shallow } from 'enzyme';
import toJson from 'enzyme-to-json';

import{ users, question,questions } from '../utils/_DATA';
import '../setupTests';

import { LeaderBoard } from '../containers/LeaderBoard';

import configureStore from 'redux-mock-store';
import renderer from 'react-test-renderer';
import { Provider } from 'react-redux';

const mockStore = configureStore([]);


const ComponentTest =(component) =>  expect(toJson(component)).toMatchSnapshot();
describe('Containers tests', () => {
    let store;
    let MyComponent;
    beforeEach(() =>{
       
        store = mockStore({
            users, 
            signUser:'tylermcginnis',
            questions
        });
        store.dispatch = jest.fn();
        MyComponent = renderer.create(
            <Provider store={store}>
                <LeaderBoard />
            </Provider>
        );
    });
    it('should render leaderboard without error', () => {
        
        expect(MyComponent.toJson()).toMatchSnapshot();
    })

After writing jest --watch, I find this error which shows state data was unable to be passed to a component

TypeError: Cannot convert undefined or null to object
        at Function.values (<anonymous>)

The above error occurred in the <LeaderBoard> component:

The LeaderBoard component might retrieve passed data from store

0

There are 0 best solutions below