Mutation.isPending does not reset to false after the update finishes in my test

[binhtran04]

Hi,

I already searched through the discussions but didn't find the answer.
I'm going to describe my issue below.

In my component, I use useMutation to update the data, and in onError I toast an error message. Furthermove, I use mutation.isPending to disable/enable the save button.

const workflowCreateMutation = useMutation({
    mutationFn: async (dto: DTO) => {
      ...
    },
    onSuccess: () => {
      queryClient.removeQueries({
        queryKey: ["list"],
      });
    },
  });

  const handleSaveAsNewWorkflow = () => {
      const loadingToastId = toastLoading("Saving a new workflow");
      workflowCreateMutation.mutate(
        {...},
        {
          onSuccess: () => {
          ...
          },
          onError: (error) => {
            console.log(" toast error");
            if (error instanceof ResponseError) {
              if (error.response.status === 409) {
                toastError(
                  "A workflow with this name already exists. Please choose a different name.",
                  {
                    duration: 5000,
                  }
                );
                return;
              }
            }
            toastError(
              "There was an error saving the workflow. Please try again later."
            );
          },
          onSettled: () => {
            toast.dismiss(loadingToastId);
          },
        }
      );
  };

in my test, I use msw to mock the network. I want to test the error case, to show the correct toast message, and re-enable the save button afterwards.

it(
    "when Save as new workflow and the API returns 409" +
      "it should show the correct error notification",
    async () => {
      server.use(
        http.post("/api/workflows/", async () => {
          await delay();
          return new HttpResponse(
            "Workflow with the same name already exists",
            { status: 409 }
          );
        })
      );

      const user = userEvent.setup();
      render(<TestComponent />);

      await waitForElementToBeRemoved(() =>
        screen.queryByText("Loading workflow...")
      );

      // click save workflow button
      const saveAsNewWorkflowButton = screen.getByText("Save as new workflow");
      await user.click(saveAsNewWorkflowButton);

      expect(screen.getByLabelText("name")).toBeInTheDocument();

      const saveBtn = screen.getByTestId("modal-save-new-workflow-button");
      await user.click(saveBtn);

      await waitFor(() => {
        expect(saveBtn).toBeDisabled();
      });

      await waitFor(() => {
        expect(toastMock.error).toHaveBeenCalledWith(
          "A workflow with this name already exists. Please choose a different name.",
          expect.anything()
        );
      });

      await waitFor(() => {
        expect(saveBtn).not.toBeDisabled();
      });
    }
  );

In my mock when I use await delay(), the mutation.isPending initially correctly switches from false to true and then it shows the toast error correctly. But after that, it fails to switch back to false after the toastError is called. In other words, the save button is supposed to be re-enabled at the end of the test, but it stays disabled.

The expected behaviour of the mutation.isPending state would be false -> true -> false
but the real behaviour is false -> true

However, this only happens in my tests. In the real software, I can verify that the isPending state correctly changes.

How can I properly test mutation isPending state? Thank you in advance for your help.

"@tanstack/react-query": "^5.30.0",
"vite": "^5.3.1",
"vitest": "^1.6.0",
"msw": "^2.3.0",