React act() warning with vi.waitFor() but not with RTL's waitFor

[astorije]

Apologies if this was previously asked or answered, I could not find existing discussions/issues on the topic. I created a reproduction repo at https://github.com/astorije/vitest-act-warning-repro, the following snippets are extracted from said repo.

I recently ran into a dreaded React act() warning in one of our tests and, while the warning was easy to fix, I cannot figure out 2 things about resolving it.

Consider the following (somewhat minimal repro) React code:

import { useState } from "react";

export function App() {
  const [status, setStatus] = useState("waiting");

  return (
    <>
      <button
        onClick={() => {
          setStatus("loading");

          setTimeout(() => {
            window.open("https://example.com");

            setStatus("complete");
          }, 100);
        }}
      >
        Click me
      </button>

      <p>status: {status}</p>
    </>
  );
}

as well as the following test:

import { describe, expect, it, vi } from "vitest";
import { App } from "./App";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";

describe("<App />", () => {
  it("tests the app", async () => {
    const user = userEvent.setup();
    const windowOpenSpy = vi.spyOn(window, "open").mockImplementation(vi.fn());

    render(<App />);

    expect(screen.getByRole("paragraph")).toHaveTextContent("status: waiting");

    await user.click(screen.getByRole("button"));

    expect(await screen.findByRole("paragraph")).toHaveTextContent(
      "status: loading"
    );

    await vi.waitFor(() =>
      expect(windowOpenSpy).toHaveBeenCalledWith("https://example.com")
    );
  });
});

The act() warning started to appear when adding globals: true to our Vitest configuration (which, separate issue, but necessary for proper automatic cleanup between each test, prior to that I was manually calling afterEach(() => cleanup()), see testing-library/vue-testing-library#296).

1️⃣ Why would the act() warning only start to appear with globals set to true?

The warning itself was pretty easy to resolve: instead of calling vi.waitFor() coming from Vitest, I now use waitFor imported from @testing-library/react.

2️⃣ Why is the act() warning correctly handled by RTL's waitFor but not Vitest's waitFor?

3️⃣ (After the fact and somewhat unrelated) How would you recommend making the vitest command (or another command I could tie to npm test) fail when an act() warning is triggered? I find that often these get overlooked at review time and then it's a pain to pinpoint the commit that actually caused this (thank you git bisect!)

Thank you!

[hi-ogawa]

1️⃣ Why would the act() warning only start to appear with globals set to true?

Probably that's because @testing-library/react checks typeof beforeAll to set up IS_REACT_ACT_ENVIRONMENT globals https://github.com/testing-library/react-testing-library/blob/85ac2534a59abd38880011e77da4bb8c716eba84/src/index.js#L27-L38 which then let react trigger warning https://github.com/facebook/react/blob/1631855f4303cc8585205307a56c69e3b7248bb4/packages/react-reconciler/src/ReactFiberAct.js#L23

Not sure about the 2nd one 🤔 Can you provide a repro? oh you have that already.

[astorije]

That would make sense re: 1️⃣, thank you!
That seems like an odd way (on RTL's end) to determine whether IS_REACT_ACT_ENVIRONMENT should be set, interesting.

Looking around, it sounds like when globals is not set, not only the cleanup has to be done manually but REACT_IS_ACT_ENVIRONMENT must be set manually as well, according to testing-library/react-testing-library#1257. I wonder if both docs (RTL and Vitest) should mention this, I haven't seen it documented anywhere and it wasn't obvious/trivial to me 😅

[hi-ogawa]

2️⃣ Why is the act() warning correctly handled by RTL's waitFor but not Vitest's waitFor?

This looks very odd since act warning should come from click. For example, warning shows up if I give some time after click.

  it("tests the app", async () => {
    const user = userEvent.setup();
    render(<App />);
    expect(screen.getByRole("paragraph")).toHaveTextContent("status: waiting");
    await user.click(screen.getByRole("button"));
    await new Promise(r => setTimeout(r, 500))
  })

[astorije]

Interesting. Do you have any suggestions there?

[hi-ogawa]

3️⃣ (After the fact and somewhat unrelated) How would you recommend making the vitest command (or another command I could tie to npm test) fail when an act() warning is triggered?

You can patch console.error to catch the warning and resurface later using setup files https://stackblitz.com/edit/github-6nary6mh?file=src%2Fvitest.setup.ts

import { beforeEach, vi } from "vitest";

beforeEach(() => {
  const warnings: any[] = [];
  const consoleError = console.error;
  const spy = vi.spyOn(console, "error").mockImplementation((...args) => {
    consoleError(...args);
    const message = args[0];
    if (typeof message === 'string' && message.includes('When testing, code that causes React state updates should be wrapped into act')) {
      warnings.push(args);
    }
  });
  return () => {
    spy.mockRestore();
    if (warnings.length > 0) {
      throw new Error("Found act warnings");
    }
  }
});

[astorije]

Thank you, I'll look into that! I was hoping there would be a more "encapsulated" option that I never ran into, but oh well.

I might also give a shot at either:

• https://github.com/thomasbrodusch/vitest-fail-on-console
• https://github.com/ValentinH/jest-fail-on-console (with https://stackoverflow.com/a/74989870)
  but I'm not sure if these are mature/maintained enough at their current stage.