Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Having `afterEach(cleanup)` in the test setup file breaks exported `screen` module on Bun test

オープン
  • 何か問題がありますか？
#1,348 コメント 6 件 リアクション 5 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
50/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
静か
技術スタック
react, typescript
領域
frontend, testing-qa

調査の方向性

まず、示されているとおり test.setup.ts と Component.spec.tsx を使って bun test --preload test.setup.ts を実行します。afterEach(cleanup) がエクスポートされた screen および render が使用する document とどのように相互作用するかを追跡します。エクスポートされた screen を使用しながら setup レベルの cleanup を維持でき、Bun を対象とするリグレッションテストでカバーされていれば完了です。

索引モデルが issue の本文から書いたものです。

説明

  • @testing-library/react version: 15.0.7
  • Testing Framework and version: Bun test v1.1.21
  • DOM Environment: @happy-dom/[email protected]
Relevant code or config:

test.setup.ts

import { GlobalRegistrator } from '@happy-dom/global-registrator';
import { cleanup } from '@testing-library/react';

import { expect, afterEach } from 'bun:test';

import * as matchers from '@testing-library/jest-dom/matchers';

GlobalRegistrator.register();

declare module 'bun:test' {
  interface Matchers<T> extends matchers.TestingLibraryMatchers<any, void> {}
  interface AsymmetricMatchers extends matchers.TestingLibraryMatchers<any, void> {}
}

expect.extend(matchers);

afterEach(cleanup);

Component.spec.tsx

import { act, render, screen } from '@testing-library/react';
import { TextAreaInput } from './TextAreaInput.component';
import { describe, it } from 'bun:test';

describe('TextAreaInput', () => {
  it('Should show in the DOM', async () => {
    const { getByRole } = await act(() => render(<TextAreaInput />));

    // Works fine!
    getByRole('textbox')

    // throws an error
    screen.getByRole('textbox');
    // TypeError: For queries bound to document.body a global document has to be available... Learn more: https://testing-library.com/s/screen-global-error
  });
});
What you did:

I'm just trying to test a component using the screen exported by react testing library using Bun test.

What happened:

everything was smooth, until I tried to use the screen exported from the react testing library it threw an error about "global document has to be available",
upon inspecting, removing afterEach(cleanup) from the test setup file or writing afterEach(cleanup) in each test file will make it works,

Reproduction:

just run bun test --preload test.setup.ts

Problem description:

using the screen exported while having the cleanup code in the test setup will break the test

Suggested solution:

just use the returned screen from the render function.

主要言語
JavaScript
スター
19.7k
フォーク
1.2k
30日以内にマージされた PR はありません

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

testing-library/react-testing-library のほかの issue

testing-library/react-testing-library の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。