How to test if mutate is called with a correct payload

[binhtran04]

Let's say I have an input for the user to enter a name, and then a submit button. After submitting, the application will send a post request to /api/user with the JSON payload {username: <name input from user>}. How to test if useMutation mutate is called with the correct payload?

Simple component example:

const UserInputForm = () => {
  const [username, setUsername] = useState("");

  const mutation = useMutation({
    mutationFn: (payload) => {
      return Promise.resolve(payload);
    }
  })

  return (
    <div>
      <input
        type="text"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <button onClick={mutation.mutate({username})}>Submit</button>
    </div>
  );
}

[TkDodo]

my recommendation is to always mock / inspect the network layer and just test if your app behaves correctly. If the network call isn't made with the correct input, your app will hopefully behave differently.

https://tkdodo.eu/blog/testing-react-query

[binhtran04]

thanks