useEffect 中的 Jest 测试函数调用

Question

I have the following test:

  it("should call runValidation when listen_to is set", async () => {
    const updatedProps = {
      item: {
        ...props.item,
        attributes: {
          ...props.item.attributes,
        },
      },
      validation: {
        ...props.validation,
        setValue: jest.fn(),
        runValidation: jest.fn(),
        listenFieldValues: jest.fn(),
      },
    };

    const spyOnValidation = jest.spyOn(
      updatedProps.validation,
      "runValidation"
    );

    render(<Average item={updatedProps.item} validation={props.validation} />);

    expect(spyOnValidation).toHaveBeenCalled();
  });

and this is the UI related to it:

export const Average = ({ item, validation }: ComponentProps): JSX.Element => {
  const { attributes, name } = item;

  const hide_cents = attributes?.hide_cents;
  const [price, setPrice] = useState<number>(Number(item.value || 0));

  useEffect(() => {
    if (attributes?.listen_to) {
      console.log("validation: ", validation);
      setupListenData({ item, validation, callback: setPrice });
      validation.runValidation();
    }
  }, [item, attributes, validation]);
...

I am trying to test that validation.runValidation() is being called inside useEffect but the test is failing: number of calls 0

I have also tried to use waitFor but the test passes regardless of how many times haveBeenCalledTimes(3) or haveBeenCalledTimes(100)

Answer 1

Have you tried to create a mock function within this test, then assign the mock function to updatedProps.validation.runValidation , then you just expect the mock function is called?

  it("should call runValidation when listen_to is set", () => {
    const mockRunValidation = jest.fn();
    const updatedProps = {
      item: {
        ...props.item,
        attributes: {
          ...props.item.attributes,
        },
      },
      validation: {
        ...props.validation,
        setValue: jest.fn(),
        runValidation: mockRunValidation,
        listenFieldValues: jest.fn(),
      },
    };
    render(<Average item={updatedProps.item} validation={props.validation} />);

    expect(mockRunValidation).toHaveBeenCalled();
  });