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