Jest mock function not being invoked

[johnnithin08]

I need to have a unit test which checks whether my component dropdown handler function has been invoked after pressing any elements in the dropdown.

The error that I am getting is that the handler function is not being invoked.

I've tried using the waitfor. Didnt make any difference.

Test:

it("render NewDatePicker and check on Press", async () => {
    const mockCurrentFn = jest.fn();
   render(<NewDatePicker placeholder="Test Placeholder" mode="time" 
   setValue={mockCurrentFn} testId="test" value={undefined} />)
    fireEvent.press(await screen.findByTestId("test"));
    fireEvent.press(await screen.findByText("Confirm Date"));
    await waitFor(() => {
      expect(mockCurrentFn).toHaveBeenCalled();
    })

  });

Component:

The relevant portion where I call the handle function.

const handleConfirmDate = () => {
    setValue(selectedDate);
    handleAnimationClose();
  };

<CustomButton
     buttonStyle={defaultButtonStyle}
     onPress={handleConfirmDate}
     text={buttonText || DATE_PICKER.BUTTON_CONFIRM}
     />

[mdjastrzebski]

@johnnithin08 pls submit a minimal reproduction repository so that we can reproduce your problem locally. This should be based on ours basic example.

[johnnithin08]

Hi @mdjastrzebski. Thank you for the reply. I have created a dummy repo. You can refer to this https://github.com/johnnithin08/unit-tests. I did look through the examples but didn't work in this case. In the code, the test is failing for the dropdown and date picker.

[pierrezimmermannbam]

Hello @johnnithin08 I've done some investigation based on your repo. The tests for the date picker works for me (they fail because there are errors logged but the function is being called).

The tests of the dropdown do fail for the following reason: when you call fireEvent.press on the item, the collapsible is still collapsed. This is because it expands with a delay of 80ms. When the collapsible is collapsed, its children are rendered, hence you are able to call press on the text within but it also has pointer events none so fireEvent.press does nothing because it is disabled. To make the test pass, you can use fake timers and wait for timers to be resolved before doing the next press

  it.only("render a NewDropdown and check press", async () => {
    const mockFn = jest.fn();
    jest.useFakeTimers();

    render(
      <NewDropdown
        handleChange={mockFn}
        items={[{ label: "Test Item", value: "Test Item" }]}
        testId="test"
        value=""
      />
    );
    // await waitFor(async () => {

    fireEvent.press(await screen.findByTestId("test"));
    console.log("after first press");
    jest.runAllTimers();
    fireEvent.press(screen.getByText("Test Item"));
    // console.log(screen.getByText("Test Item"));
    await waitFor(() => {
      expect(mockFn).toHaveBeenCalled();
    });
  });
});

Let me know if you have further questions, hope this helps!

[johnnithin08]

@pierrezimmermannbam Hey. Thanks for the help. I got it working. It is a bit hard to identify the root cause to be the timeout. I encountered some test failures when I didn't put the runAllTimers inside an act. That did the trick for me. Also, only useFakeTimers("legacy") worked for me. Thanks.

jest.useFakeTimers("legacy")

it("render a NewDropdown and check press", async () => {
    const mockFn = jest.fn();
    render(<NewDropdown handleChange={mockFn} items={[{ label: "Test Item", value: "Test Item" }]} testId="test" value="" />);
    fireEvent.press(await screen.findByTestId("test"));
    act(() => {
      jest.runAllTimers()
    })
    fireEvent.press(await screen.findByText("Test Item"));
    act(() => {
      jest.runAllTimers()
    })
    await waitFor(() => {
      expect(mockFn).toHaveBeenCalled();
    })
  });

[pierrezimmermannbam]

@johnnithin08 you're right all jest functions that have an effet on timers should be wrapped in act. Regarding modern fake timers, I got them working by using RNTL's preset. In your jest config you should change this line:

preset: @testing-library/react-native

This is required for versions of react native < 0.71, this is further detail in the readme. Also this should make the warning you have on act being not called with await go away