Question

我想知道如何在代码中测试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组件中覆盖这些回调？

Answer 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}
    />

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

1 个答案: