Example AsyncThunks about mock-react-redux

[JoshuaKGoldberg]

Hi @AntonyFagundez, thanks for the issue! Totally clear & understandable English; what you're asking for makes sense.

This is an annoying quirk we found around working with dispatched thunks, yeah. I'm guessing your newContact function looks something like:

export const newContact = (values) => (dispatch, getState) => {
  /* ... */
};

expect(dispatch).toHaveBeenCalledWith(newContact(values)); // New function ❌

Structure like that means newContact returns a new [Function anonymous] every time it's called. I'll add an example to the docs.

In the meantime...

Strategy: Same Function

One solution would be to make a function that stays the same between them:

export const newContentThunk = (dispatch, getState) => {
  /* ... */
};

export const newContent = () => newContentThunk;

expect(dispatch).toHaveBeenCalledWith(newContentThunk()); // Same function ✔

...though that direct line of code doesn't support an action prop the way your newContact takes in a values.

Strategy: Memoized Function

If you want to support parameters, you could use something like Lodash's memoize to cache the function returned by newContent:

import { memoize } from "lodash";

export const newContent = memoize((values) => {
  return (dispatch, getState) => {
    /* ... */
  };
});

const values = {
  /* ... */
};

dispatch(newContent(values));

expect(dispatch).toHaveBeenCalledWith(newContent(values)); // Same function ✔

Note that Lodash by default does a strict equality check, so while the above snippet works, newContent({}) === newContent({}) would result in false because the {} is different between those two calls.

[AntonyFagundez]

Hi @JoshuaKGoldberg thanks for the detailed answer>

I was indeed making a mistake comparing two references in memory.

With your help I finally get a solution (with memoize from lodash)

  test("Should dispatch if all fields exists and were validated", async () => {
    const { dispatch, state } = mockReactRedux();

    const sameFunction = memoize(() => newContact(values)(dispatch, state));

    const mockedSubmit = jest.fn().mockImplementation(() => {
      dispatch(sameFunction());
    });

    render(<ContactForm onSubmit={mockedSubmit} />);

    userEvent.type(screen.getByPlaceholderText("Nombre"), "John");
    userEvent.type(screen.getByPlaceholderText("Email"), "[email protected]");
    userEvent.type(screen.getByPlaceholderText("Teléfono"), "23456789");
    userEvent.type(screen.getByPlaceholderText("Escribe tu mensaje"), "Lorem ipsum dolor sit");

    userEvent.click(screen.getByTestId("contactButton"));

    await waitFor(() => {
      expect(dispatch).toHaveBeenCalled();
      expect(dispatch).toHaveBeenCalledWith(sameFunction());
    });
  });

Thanks again!!