使用 redux-mock-store 进行单元测试 - 我怎样才能让这个单元测试通过？

Question

我刚开始使用 jest 和 enzyme。

我在进行单元测试时遇到了问题。我正在使用 redux-mock-store 来模拟商店对象。

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

我需要两个 li 元素，但我得到了 0 个 li 元素。

这个错误卡了很久

谁能帮我弄清楚如何通过这个测试！？

jest 测试运行器的测试结果

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);

Answer 1

您可以导出未修饰的 CommentList 组件并通过仅传递评论道具进行测试，或者您可以尝试使用 Provider 包装 CommentList 组件并将商店传递给它。

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

您可以在此处找到更多信息： http://redux.js.org/docs/recipes/WritingTests.html#connected-components

为了使您的示例工作，您必须将列表更改为：

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

Answer 2

我认为如果您在 beforeEach() 中使用 mount 而不是 shallow 渲染组件，它应该会像这样工作。

使用浅渲染，渲染器不会深入到显示您的 li 组件，因为树将是 connect(CommentList) -> CommentList -> ul -> li

如果需要，您还可以使用 dive 更深一层，以防您想保持浅层。在文档中查看： http://airbnb.io/enzyme/docs/api/ShallowWrapper/dive.html

使用 redux-mock-store 进行单元测试 - 我怎样才能让这个单元测试通过？

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

reactjs

jestjs

redux

enzyme

redux-mock-store

jest 测试运行器的测试结果

CommentList.test.js

CommentList.js