Question

我有一个像这样的组件：

    export const MyList = props => {

      const myCallbackFunction = () => {
        // do stuff
      };

      const ListEmptyComponent = (
        <MyCustomComponent
            text="sample text"
            onButtonPress={myCallbackFunction}
        />
      );

      return (
        <FlatList
         data={DATA}
         renderItem={({ item }) => (<Item title={item.title} />)}
         ListEmptyComponent={ListEmptyComponent} />
       );
    };

我想测试ListEmptyComponent。在测试中，我尝试模拟myCallbackFunction并确保ListEmptyComponent等于MyCustomComponent：

    it("should display the MyCustomComponent", () => {
        const myCallbackFunction = jest.fn();
        const component = renderComponent();

        expect(
            component
                .find(FlatList)
                .prop("ListEmptyComponent")
        ).toEqual(
            <MyCustomComponent
                text="sample text"
                onButtonPress={myCallbackFunction}
            />
        );
    });

测试失败，因为这是预期的结果： onButtonPress={[Function mockConstructor]} 这就是它收到的内容：onButtonPress={[Function myCallbackFunction]}

我在做什么错了？

Answer 1

定义代码后，函数myCallbackFunction是私有函数，因此您将无法对其进行模拟。

在测试中，您要定义一个具有与私有函数相同名称的模拟函数，但这并不意味着它们是相同的函数（不是）。

在不更改组件代码的情况下，您可以检查组件ListEmptyComponent在onButtonPress属性中是否收到函数：

it("should display the MyCustomComponent", () => {
    const myCallbackFunction = jest.fn();
    const component = renderComponent();

    expect(
        component
            .find(FlatList)
            .prop("ListEmptyComponent")
    ).toEqual(
        <MyCustomComponent
            text="sample text"
            onButtonPress={expect.any(Function)}
        />
    );
});

如何使用回调函数测试组件

1 个答案: