SelectionIndicator: flushSync inside queueMicrotask causes "not wrapped in act" warning in Vitest browser mode

[lyhoang-web-dev]

Provide a general summary of the issue here

SelectionIndicator (via SharedElement) schedules React state updates using flushSync inside queueMicrotask and requestAnimationFrame callbacks.
These fire after React's act() boundary closes during test renders, triggering:

An update to ForwardRef(SharedElement) inside a test was not wrapped in act(...)

When using vitest-fail-on-console — a common CI-safety package that converts console.error into hard test failures
Every test that renders a <Tabs> component built following the React Aria Tabs docs
(i.e. a custom Tab with <SelectionIndicator /> inside) will fail, even though the component renders and behaves correctly.

🤔 Expected Behavior?

• When running Vitest tests (browser mode, Chromium via Playwright) that render a <Tabs> component containing <SelectionIndicator>, no console.error should be emitted.
• State updates triggered by rendering the component should be compatible with React's testing act() boundary.

😯 Current Behavior

Every test that renders <Tabs> with <SelectionIndicator> logs the following console.error:

 An update to ForwardRef(SharedElement) inside a test was not wrapped in act(...).
 When testing, code that causes React state updates should be wrapped into act(...):
 act(() => {
   /* fire events that update state /
 });
 / assert on the output */

With vitest-fail-on-console (a common CI-safety package) this turns into a
hard test failure even though the component renders and behaves correctly.

Root cause — SharedElementTransition.tsx

The SharedElement component schedules state updates via flushSync inside asynchronous callbacks that fire after React's act() window has closed:

// line 122 — new element entering
queueMicrotask(() => flushSync(() => setState('entering')));
requestAnimationFrame(() => setState('visible'));      // line 125

// line 130–134 — element exiting
queueMicrotask(() => {
  if (scope[name]) {
    flushSync(() => setState('exiting'));              // line 133
    Promise.all(element.getAnimations().map(a => a.finished))
      .then(() => setState('hidden'));                 // line 136
  }
});

// queueMicrotask fires after act() finishes. 
// The flushSync call inside it synchronously flushes a React state update, which React detects as an out-of-act() update and logs the warning.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

Clone and run the minimal reproduction below (or copy the files manually):

git clone https://github.com/lyhoang-web-dev/react-aria-shared-element-repro
cd react-aria-shared-element-repro
pnpm install
pnpm exec playwright install chromium
pnpm test

Expected: tests pass with no console errors
Actual: test fails — vitest-fail-on-console converts the console.error into a hard failure

---

Minimal reproduction files

package.json

{
  "name": "react-aria-shared-element-repro",
  "private": true,
  "scripts": {
    "test": "vitest"
  },
  "dependencies": {
    "react": "19.2.4",
    "react-dom": "19.2.4",
    "react-aria-components": "1.16.0"
  },
  "devDependencies": {
    "@types/react": "^19.2.14",
    "@vitejs/plugin-react": "4.5.0",
    "@vitest/browser": "4.0.18",
    "@vitest/browser-playwright": "4.0.18",
    "playwright": "1.58.0",
    "vitest": "4.0.18",
    "vitest-browser-react": "2.0.4",
    "vitest-fail-on-console": "0.10.1"
  }
}

vite.config.ts

import react from "@vitejs/plugin-react";
import { playwright } from "@vitest/browser-playwright";
import { defineConfig } from "vitest/config";

export default defineConfig({
  plugins: [react()],
  test: {
    setupFiles: ["./src/setup-tests.ts"],
    browser: {
      enabled: true,
      provider: playwright(),
      instances: [{ browser: "chromium" }],
    },
  },
});

src/setup-tests.ts

import failOnConsole from "vitest-fail-on-console";

failOnConsole();

src/tabs.test.tsx

import { render } from "vitest-browser-react";
import { describe, expect, test } from "vitest";
import {
  SelectionIndicator,
  Tab as RACTab,
  type TabProps as RACTabProps,
  TabList,
  TabPanel,
  TabPanels,
  Tabs,
  composeRenderProps,
} from "react-aria-components";

/**
 * Custom Tab that includes SelectionIndicator, matching the React Aria docs:
 * https://react-aria.adobe.com/Tabs
 *
 * This is what triggers SharedElement → flushSync inside queueMicrotask,
 * causing the "not wrapped in act" warning.
 */
function Tab(props: RACTabProps) {
  return (
    <RACTab {...props}>
      {composeRenderProps(props.children, (children) => (
        <>
          {children}
          <SelectionIndicator />
        </>
      ))}
    </RACTab>
  );
}

describe("Tabs", () => {
  test("renders the selected tab panel", async () => {
    // Tab renders SelectionIndicator → SharedElement, which schedules state
    // updates via flushSync inside queueMicrotask/requestAnimationFrame.
    // These fire outside React's act() boundary, producing:
    //
    // "An update to ForwardRef(SharedElement) inside a test was not wrapped in act(...)"
    //
    // vitest-fail-on-console converts this console.error into a hard failure.
    const screen = await render(
      <Tabs defaultSelectedKey="overview">
        <TabList aria-label="Sections">
          <Tab id="overview">Overview</Tab>
          <Tab id="details">Details</Tab>
        </TabList>
        <TabPanels>
          <TabPanel id="overview">Overview content</TabPanel>
          <TabPanel id="details">Details content</TabPanel>
        </TabPanels>
      </Tabs>,
    );

    await expect
      .element(screen.getByRole("tab", { name: "Overview" }))
      .toBeInTheDocument();
  });
});

index.html

<!doctype html>
<html>
  <head><meta charset="UTF-8" /></head>
  <body><div id="root"></div></body>
</html>

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "strict": true,
    "lib": ["ESNext", "DOM", "DOM.Iterable"]
  },
  "include": ["src"]
}

Version

1.16.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Windows 11 Pro (10.0.26200)

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[nwidynski]

Thanks for the report. I figure we could probably use a similar approach to our virtualizer internals.

react-spectrum/packages/react-aria/src/virtualizer/ScrollView.tsx

Lines 285 to 306 in 9e18b4a

	useLayoutEffect(() => {
	if (!isUpdatingSize.current && (lastContentSize.current == null || !contentSize.equals(lastContentSize.current))) {
	// React doesn't allow flushSync inside effects, so queue a microtask.
	// We also need to wait until all refs are set (e.g. when passing a ref down from a parent).
	// If we are in an `act` environment, update immediately without a microtask so you don't need
	// to mock timers in tests. In this case, the update is synchronous already.
	// IS_REACT_ACT_ENVIRONMENT is used by React 18. Previous versions checked for the `jest` global.
	// https://github.com/reactwg/react-18/discussions/102
	// @ts-ignore
	if (typeof IS_REACT_ACT_ENVIRONMENT === 'boolean' ? IS_REACT_ACT_ENVIRONMENT : typeof jest !== 'undefined') {
	// This is so we update size in a separate render but within the same act. Needs to be setState instead of refs
	// due to strict mode.
	setUpdate({});
	lastContentSize.current = contentSize;
	return;
	} else {
	queueMicrotask(() => updateSizeEvent(flushSync));
	}
	}
	lastContentSize.current = contentSize;
	});

Have you tried mocking timers yet?

[lyhoang-web-dev]

Hi @nwidynski, thanks for the suggestion! I tried mocking timers using vi.useFakeTimers() + vi.runAllTimersAsync() but it didn't resolve the issue.

Worth noting: this project uses Vitest browser mode (Chromium via Playwright), not jsdom. Fake timers in browser mode behave differently queueMicrotask and requestAnimationFrame run in a real browser context, so vi.useFakeTimers() doesn't intercept them the same way it does in jsdom.

Here's what I tried:

 beforeEach(() => vi.useFakeTimers());
 afterEach(() => vi.useRealTimers());

 test("...", async () => {
   const screen = await render(<Tabs>...</Tabs>);
   await vi.runAllTimersAsync();
   // still fails with console.error
 });

Is there a browser-mode-compatible approach? Or would a fix on the library side (e.g. a disableAnimation context prop, or guarding the flushSync calls in test environments) be the intended path forward?

[snowystinger]

If you change

    await expect
      .element(screen.getByRole("tab", { name: "Overview" }))
      .toBeInTheDocument();

to be

  await waitFor(() => expect
    .element(screen.getByRole("tab", {name: "Overview"}))
    .toBeInTheDocument()
  );

Does that work?

[lyhoang-web-dev]

I tried it, still an issue.

import { vi } from "vitest";

  await vi.waitFor(() =>
    expect
      .element(screen.getByRole("tab", { name: "Overview" }))
      .toBeInTheDocument(),
  );

[snowystinger]

I don't think this alone would work, you'd need to wrap the advancement of the timers in an act

await vi.runAllTimersAsync();
// ->
await act(async () => vi.runAllTimersAsync());

[snowystinger]

Also, if you place console logs around the various calls, it'd be good to know where/when the failure happens

 test("...", async () => {
   const screen = await render(<Tabs>...</Tabs>);
   console.log('after render');
   await vi.runAllTimersAsync();
   console.log('after timers');
   // still fails with console.error
 });

This can help narrow down where to do the waiting

[lyhoang-web-dev]

The tried to use act it. still throw error in testing.

import { act } from "react";
import { render } from "vitest-browser-react";
import { beforeEach, afterEach, vi, describe, expect, test } from "vitest";

describe("Tabs", () => {
  beforeEach(() => { vi.useFakeTimers(); });

  afterEach(() => { vi.useRealTimers(); });

  test("renders the selected tab panel", async () => {
    console.log("before render");
    const screen = await render(<Tabs>...</Tabs>);
    console.log("after render");

    await act(async () => {
      await vi.runAllTimersAsync();
    });
    console.log("after runAllTimersAsync");

    await vi.waitFor(() =>
      expect
        .element(screen.getByRole("tab", { name: "Overview" }))
        .toBeInTheDocument(),
    );
    console.log("after waitFor");
  });
});

[lyhoang-web-dev]

@snowystinger I update the log so you can know what step the error comes from.

[snowystinger]

Looks like it's happening inside render somehow, can you wrap the render in an act? I know that sounds a bit funny.

[lyhoang-web-dev]

Hi @snowystinger, Wrapping render in act doesn't work in vitest browser mode since IS_REACT_ACT_ENVIRONMENT isn't set there.

Root cause: Two setState calls fire from queueMicrotask inside useLayoutEffect — outside React's act() boundary:

1. queueMicrotask(() => flushSync(() => setState('entering'))) entering case
2. queueMicrotask(() => { ... setState('hidden') ... }) exiting case (triggered by non-selected tabs)

Fix in SharedElementTransition.tsx:

- import {flushSync} from 'react-dom';

  // Entering case: setState directly in useLayoutEffect
  // React re-renders synchronously before paint, so animation timing is preserved.
- queueMicrotask(() => flushSync(() => setState('entering')));
+ setState('entering');

  // Exiting case: skip queueMicrotask when no CSS transitions
  // the cleanup never stores a snapshot so no cross-component coordination needed.
- queueMicrotask(() => {
-   if (scope[name]) { ... flushSync(() => setState('exiting')); ... }
-   else { setState('hidden'); }
- });
+ let computedStyle = window.getComputedStyle(element);
+ if (computedStyle.transitionProperty === 'none') {
+   setState('hidden');
+ } else {
+   queueMicrotask(() => {
+     if (scope[name]) { delete scope[name]; setState('exiting'); ... }
+     else { setState('hidden'); }
+   });
+ }

After this, no act() wrapper is needed at all. Happy to open a PR if this looks good!