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

Question

I have a component like this:

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

I want to test the ListEmptyComponent. Inside my test I try to mock myCallbackFunction and make sure ListEmptyComponent is equal to 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}
            />
        );
    });

The test fails because this is what it expects: onButtonPress={[Function mockConstructor]} and this is what it receives: onButtonPress={[Function myCallbackFunction]}

What am I doing wrong?

Answer 1

As the code is defined, the function myCallbackFunction is a private function, so you are not going to be able to mock it.

In your test, you are defining a mock function with the same name of the private function, but that does not mean they are the same function (they are not).

Without changing the component code, you could check that the component ListEmptyComponent receives a function in the onButtonPress property:

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