`waitFor` utils are not wrapped in `act` so some state updates are not applied to the DOM
まだ誰も着手していません。
評価
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 初心者へのやさしさ
- 35/100
- issue の種類
- バグ
- 明瞭さ
- おおむね明確
- 活発さ
- 停滞
- 技術スタック
- javascript, react
調査の方向性
DOM Testing Library に渡される async wrapper と、App.test.tsx に示されている waitForElementToBeRemoved の使用方法から始めてください。直接的な act 呼び出しを削除したリンク先のコミットを確認し、続いて StackBlitz の再現を使って、明示的な async act がなくても最終的な state update が DOM に適用されることを検証してください。
索引モデルが issue の本文から書いたものです。
説明
@testing-library/reactversion: 16.3.0- Testing Framework and version: jest 30.1.3
- DOM Environment: jsdom 26.1.0
Relevant code or config:
test('it loads', async () => {
render(<App />);
await waitForElementToBeRemoved(screen.queryByRole('progressbar'));
// Commenting this out fails the test
// await act(() => new Promise((r) => setTimeout(r, 0)));
expect(screen.getByText('Loaded')).toBeDefined();
});
What you did:
Upgrading to React 18 along with react testing library v14, I found that some of my tests were now failing unless I add an explicit async act.
Digging into it, it seems to be this change to the async wrapper passed to the dom testing library where it no longer directly calls act, so state updates from the final iteration of the waitFor are not flushed to the DOM.
It looks like it only flushes the microtask queue, which won't give react an opportunity to process this state update.
Reproduction:
I'm using React 18 and RTL 14 but I've reproduced it on React 19 and RTL 16.
https://stackblitz.com/edit/rtl-template-4a3jt9jx?file=src%2FApp.test.tsx&view=editor
Suggested solution:
I don't have enough knowledge of the codebase to understand why the call to act was removed.
- 主要言語
- JavaScript
- スター
- 19.7k
- フォーク
- 1.2k
- PR マージ指標
- 30日以内にマージされた PR はありません
環境構築
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートあり
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
testing-library/react-testing-library のほかの issue
-
fireEvent.select does not wrap its automatic native focus in act対応中かも @sergioperezcheco が 1 日前に担当しました。 オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 88/100
-
bug: calling configure() without reactStrictMode resets it to undefined, silently disabling strict mode再び着手できるかも @suhailopensource が 72 日前に担当しましたが、オープン中のプルリクエストはありません。 オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 35/100
testing-library/react-testing-library#1466 · コメント 1 件 ·
-
難易度 4/5 3〜5日 初心者へのやさしさ 30/100
testing-library/react-testing-library#1459 · コメント 2 件 ·
-
perf: optimize container lookup with early exit再び着手できるかも @Ch-Abhinav-Chowdary が 298 日前に担当しましたが、オープン中のプルリクエストはありません。 オープン
難易度 1/5 1時間未満 初心者へのやさしさ 35/100
testing-library/react-testing-library#1430 · コメント 1 件 ·
-
`fireEvent.mouseEnter` does not forward `relatedTarget` (relatedTarget is the window instead)対応中かも @swarnim02 が 315 日前に担当しました。 オープン
難易度 3/5 1〜2日 初心者へのやさしさ 55/100
testing-library/react-testing-library の issue をすべて見る
似ている issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 62/100
メンテナーはふだん 1 日以内に返信
-
`yarn vitest:update` (documented) throws locally; local Cypress scripts target an unserved portオープン
難易度 2/5 1〜3時間 初心者へのやさしさ 65/100
rescript-lang/rescript-lang.org#1415 ·
メンテナーはふだん 2 日以内に返信
-
[Bug]: agent capture drops long Unicode text as punctuation対応中かも @ktz03 が今日担当しました。 オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
volcengine/OpenViking#5801 ·
メンテナーはふだん 1 日以内に返信
-
bug
難易度 2/5 1〜3時間 初心者へのやさしさ 85/100
Deepak3699/Ai_Mentor#244 ·
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
nextcloud/collectives#2843 ·
メンテナーはふだん 1 日以内に返信