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

Question

我刚刚开始使用 jest 和酵素。

我在进行单元测试时遇到问题。 我使用 redux-mock-store 来模拟 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);
    });

});

评论列表.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

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

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

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

Answer 2

您可以导出未修饰的 CommentList 组件并仅通过传递 cmets 道具进行测试，或者您可以尝试使用 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>
));