On jest, `afterEach(cleanup)` is too late to unmount a component using `useSyncExternalStore` with asynchronous updating

Open
#1,421 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
42/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Quiet
Tech stack
javascript, react

Research direction

Start by running the reproduction repository linked in the issue with Jest, React, and @testing-library/react. Investigate the timing between the test finishing and afterEach(cleanup), focusing on how useSyncExternalStore updates are handled during unmount. Done means the reproduction no longer logs the act warning while cleanup and existing behavior remain intact.

Written by the indexing model from the issue text.

Description

  • @testing-library/react version: 16.3.0
  • react version: 19.2.0
  • Testing Framework and version:
    • jest: 30.2.0
  • DOM Environment:
    • jsdom: 27.0.1
Relevant code or config:

None (please see reproduction repository described below)

What you did:

Testing a component using React's useSyncExternalStore and running the test without async

What happened:

useSyncExternalStore's update may happen just after finishing the test, but afterEach is not called in that timing, so the callback of useSyncExternalStore cannot handle 'unmounted' state, resulting the log An update to TestComponent inside a test was not wrapped in act(...)..

Reproduction:

I created a repositoy for the reproduction: https://github.com/jet2jet/testing-test

Problem description:

During just after finishing a test and just before afterEach, the test code cannot insert act() calls, so the problem An update to ... cannot be resolved with using act().

Suggested solution:

I think it's very difficult to call cleanup() just after finishing a test, but it's necessary to unmount, for resolving timing problem.

Dominant language
JavaScript
Stars
19.7k
Forks
1.2k
Avg merge
3d 16h
Merged PRs (30d)
1

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from testing-library/react-testing-library

All issues in testing-library/react-testing-library

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.