在父无状态组件中测试prop上的回调函数-Java 学习之路

我想知道如何在代码中测试 renderItem 回调函数 . 我的覆盖率统计数据表示功能未涵盖，其返回的数据也未涵盖 .

const List = ({ data, dataKey, extraData }) => (
    <FlatList  
          data={data}
          renderItem=({ item }) => <Text>{item[dataKey]}</Text>
         keyExtractor={(item, index) => index}
    />);

测试组件如下

describe('Test List PureComponent', () => {
    it('renders as expected', () => {
        const baseProps = {
            data: listTestData,
            extraData: { state: '' },
            dataKey: 'name'
        };
        const wrapper = shallow(<List {...baseProps} />);
        expect(toJson(wrapper)).toMatchSnapshot();
    });
});

我正在测试使用jest和酶 . 我使用浅进行快照测试，但是在覆盖率统计中，我得到 renderItem 的回调函数，并且不包括return语句 . 这也适用于keyExtractor道具 .

我想知道如何在List组件中覆盖这些回调？

1 回答

从组件中提取 renderItem 和 keyExtractor 并单独测试它们 .

您可以快照测试 List 和 ListItem 组件，并正常单元测试 keyExtractor .

const ListItem = (item, dataKey) => <Text>{item[dataKey]}</Text>

const keyExtractor = (item, index) => index

const List = ({ data, dataKey, extraData }) => (
    <FlatList
        data={data}
        renderItem={({ data }) => ListItem(data, dataKey)}
        keyExtractor={keyExtractor}
    />

回复于 2024-04-24T21:47:32+08:00

在父无状态组件中测试prop上的回调函数

1 回答

相关问题