Reactjs 测试wrapper.props浅层渲染未定义

Reactjs 测试wrapper.props浅层渲染未定义,reactjs,react-native,chai,enzyme,Reactjs,React Native,Chai,Enzyme,我想测试以下代码: <React.Fragment> <Connect /> <FlatList data={[ {key: "pp", title: "Privacy Policy"}, {key: "tos", title: "Terms of Service"}, ]} renderItem={({item}) => {

我想测试以下代码:

<React.Fragment>
    <Connect />
    <FlatList
        data={[
            {key: "pp", title: "Privacy Policy"},
            {key: "tos", title: "Terms of Service"},
        ]}
        renderItem={({item}) => {
            return (
                <View
                    onPress={() => this.handleOnPress(item.key)}
                >
                    <Text>{item.title}</Text>
                </View>
            );
        }}
    />
</React.Fragment>

{
返回(
this.handleOnPress(item.key)}
>
{item.title}
);
}}
/>
以下是我的测试:

it("should render a FlatList with 2 items", () => {
        const wrapper = shallow(
            <Menu
            />
        );
        expect(wrapper).toMatchSnapshot();
        expect(wrapper.props().data).toHaveLength(2);
    });
it(“应该呈现一个包含2项的平面列表”,()=>{
常数包装=浅(
);
expect(wrapper.toMatchSnapshot();
expect(wrapper.props().data).toHaveLength(2);
});

由于某些原因,它失败并显示
。数据
未定义。我基本上想测试我的平面列表是否有2项。

如果我理解了这个问题,那么看起来您是在尝试获取
(包装器)的
.props()
,而不是作为包装器子项的

通过使用
.childAt
方法,您应该能够解决以下问题:

it("should render a FlatList with 2 items", () => {
    const wrapper = shallow(
        <Menu
        />
    );
    expect(wrapper).toMatchSnapshot();

    // expect(wrapper.props().data).toHaveLength(2);

    expect(
      wrapper // the wrapper of 'Menu'
      .childAt(1) // the second child of the 'Menu' which is the 'FlatList'
      .props() // the props of 'FlatList'
      .data // the data field of 'FlatList' props
    ).toHaveLength(2);
});
it(“应该呈现一个包含2项的平面列表”,()=>{
常数包装=浅(
);
expect(wrapper.toMatchSnapshot();
//expect(wrapper.props().data).toHaveLength(2);
期待(
包装器//菜单的包装器
.childAt(1)//菜单的第二个子菜单,即“平面列表”
.props()//平面列表的道具
.data//“平面列表”道具的数据字段
).toHaveLength(2);
});
-希望这有帮助