Reactjs 使用redux模拟存储进行单元测试-如何使此单元测试通过？

我刚开始使用玩笑和酶

我有一个问题，使我的单元测试工作。 Im使用redux模拟存储来模拟存储对象

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

我期待两个li元素，但我得到了0个li元素

我已经陷入这个错误很长时间了

谁能帮我弄清楚如何通过这次考试吗

jest测试运行程序的测试结果 CommentList.test.js

import React，{Component}来自'React'；
从“酶”导入{shall，mount，render}；
从“redux模拟存储”导入configureStore；
从“../../components/CommentList”导入CommentList；
jest.unck（'../../components/CommentList'）；
描述（'CommentList'，（）=>{
const initialState={comments:['newcomment'，'Other New Comment']}；
const mockStore=configureStore（）；
让商店；
让容器；
在每个之前（（）=>{
store=mockStore（initialState）；
容器=浅（）；
});
//这就过去了。
它（'呈现连接的组件'，（）=>{
期望（容器长度）toBe（1）；
});
//这是失败的。
它（'为每个评论显示一个li'，（）=>{
expect（container.find（'li'）.length）.toBe（2）；
});
});

CommentList.js

import React，{Component}来自'React'；
从'react redux'导入{connect}；
const propTypes={}；
const defaultProps={}；
const CommentList=（道具）=>{
const list=props.comments.map（（comment）=>{
{comment}
});
返回(

{list}

)
};
函数MapStateTops（状态）{
返回{
评论：state.comments
}
}
CommentList.propTypes=propTypes；
CommentList.defaultProps=defaultProps；
导出默认连接（MapStateTops）（CommentList）；

您可以导出未修饰的CommentList组件并通过传递注释道具进行测试，也可以尝试使用提供程序包装CommentList组件并将存储传递给它

您可以在此处找到更多信息：

为了使示例有效，您必须将列表更改为：

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

您可以导出未修饰的CommentList组件并通过传递注释道具进行测试，也可以尝试使用提供程序包装CommentList组件并将存储传递给它

您可以在此处找到更多信息：

为了使示例有效，您必须将列表更改为：

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

我认为，如果您使用

挂载来呈现组件，而不是在
beforeach（）中使用
浅层
，则应该是这样

使用浅层渲染时，渲染器不会深入到显示
li
组件的程度，因为树将是connect（CommentList）->CommentList->ul->li

如果需要，您还可以使用
潜水
更深一层，以防您想呆在浅水区。请参见文档中的：
我认为如果您使用
mount
而不是
beforeach（）中的
shall
来渲染组件，应该是这样的

使用浅层渲染时，渲染器不会深入到显示
li
组件的程度，因为树将是connect（CommentList）->CommentList->ul->li

如果需要，您还可以使用
潜水
更深一层，以防您想呆在浅水区。请参见文档中的：
我两种方法都试过了，但在测试中仍然出现同样的错误。我做错了什么吗？在我编写测试代码之前，我已经阅读了这篇文章（）。@Hayatomo它不起作用的原因是您呈现注释的方式存在问题：
map
函数必须在您的代码中返回值它什么都不做。Year！！你是对的！谢谢你抓住了这个错误。。。这就是为什么这个测试不起作用的原因之一……我两种方法都试过了，但我在测试中还是犯了同样的错误。我做错了什么吗？在我编写测试代码之前，我已经阅读了这篇文章（）。@Hayatomo它不起作用的原因是您呈现注释的方式存在问题：
map
函数必须在您的代码中返回值它什么都不做。Year！！你是对的！谢谢你抓住了这个错误。。。这是这个测试不起作用的原因之一…谢谢！！我得到了它！谢谢我得到了它！
Error: expect(received).toBe(expected)

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

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

});

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