Unit test with redux-mock-store - How can I make this unit test pass?

Question

I've just started using jest and enzyme.

I'm having a problem to make my unit test work. Im using redux-mock-store to mock store object.

it('shows an li for each comment', () => {
    expect(container.find('li').length).toBe(2);
});

I'm expecting two li elements but I got 0 li elements.

I've got stuck in this error for a long time.

Could anyone please help me to figure out how to make this test pass, please!?

test result from jest test runner

Error: expect(received).toBe(expected)

Expected value to be (using ===):
    2
Received:
    0
Expected :2
Actual   :0

CommentList.test.js

import React, { Component } from 'react';
import { shallow, mount, render } from 'enzyme';
import configureStore from 'redux-mock-store';

import CommentList from '../../components/CommentList';
jest.unmock('../../components/CommentList');

describe('CommentList', () => {

    const initialState = {comments: ['New Comment', 'Other New Comment']};
    const mockStore = configureStore();

    let store;
    let container;

    beforeEach(() => {
        store = mockStore(initialState);
        container = shallow(<CommentList store={store} />);
    });

    //This passes.
    it('renders the connected component', () => {
        expect(container.length).toBe(1);
    });

    //This fails.
    it('shows an li for each comment', () => {
        expect(container.find('li').length).toBe(2);
    });

});

CommentList.js

import React, { Component } from 'react';
import { connect } from 'react-redux';

const propTypes = {};
const defaultProps = {};

const CommentList = (props) => {

    const list = props.comments.map((comment) => {

        <li key={comment}>{comment}</li>
    });

    return (
        <ul className="comment-list">
            {list}
        </ul>
    )

};

function mapStateToProps(state) {
    return {
        comments: state.comments
    }
}

CommentList.propTypes = propTypes;
CommentList.defaultProps = defaultProps;

export default connect(mapStateToProps)(CommentList);

lucas · Answer 1 · 2017-06-27T11:31:53.357

1

You can either export not decorated CommentList component and test in by just passing comments props or you can try to wrap the CommentList component with the Provider and pass the store to it.

<Provider store={store}>
    <CommentList />
</Provider>

More information you can find here: http://redux.js.org/docs/recipes/WritingTests.html#connected-components

In order to make your example work you have to change list to:

const list = props.comments.map(comment => (
    <li key={comment}>{comment}</li>
));

edited Jun 27 '17 at 11:31

answered Jun 27 '17 at 08:02

lucas

153
8

I've tried both ways but I still got the same error in my test. Am I doing something totally wrong? – Jun 27 '17 at 08:55
I've read this article(https://medium.com/@gethylgeorge/testing-a-react-redux-app-using-jest-and-enzyme-b349324803a9) before I wrote this test code. – Jun 27 '17 at 08:56
@Hayatomo The reason it is not working is that there is an issue in the way you are rendering comments: `map` function has to return value in your code it does nothing. – lucas Jun 27 '17 at 11:31
Year!! You are right! Thank you for catching the mistake... It was one of the reasons why this test didnt work... – Jun 27 '17 at 12:06

score 1 · Accepted Answer · answered Jun 27 '17 at 10:32

I think it should work like that if you render your component using mount instead of shallow inside your beforeEach().

With shallow rendering the renderer is not going as deep as to show your li components, because the tree will be connect(CommentList) -> CommentList -> ul -> li

You can also use dive to go one level deeper if needed, in case you want to stay shallow. See in the docs: http://airbnb.io/enzyme/docs/api/ShallowWrapper/dive.html

Unit test with redux-mock-store - How can I make this unit test pass?

test result from jest test runner

CommentList.test.js

CommentList.js

2 Answers2