1

我刚刚开始使用玩笑和酶。

我在进行单元测试时遇到问题。我使用 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

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

2 回答 2

0

您可以导出未修饰的 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>
));
于 2017-06-27T08:02:40.160 回答
0

我认为如果您使用mount而不是shallow在beforeEach().

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

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

于 2017-06-27T10:32:31.227 回答