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

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