Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

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

Offen
  • Stimmt etwas nicht?
#1,348 6 Kommentare 5 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
50/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Ruhig
Tech-Stack
react, typescript
Bereich
frontend, testing-qa

Rechercherichtung

Beginne damit, bun test --preload test.setup.ts mit test.setup.ts und Component.spec.tsx wie gezeigt auszuführen. Verfolge, wie afterEach(cleanup) mit dem exportierten screen und dem von render verwendeten Dokument interagiert. Als abgeschlossen gilt die Aufgabe, wenn die Reproduktion screen aus dem Export verwenden und gleichzeitig das Cleanup auf Setup-Ebene beibehalten kann, mit einem Regressionstest, der Bun abdeckt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

  • @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.

Vorherrschende Sprache
JavaScript
Sterne
19.7k
Forks
1.2k
Keine gemergten PRs in 30 T.

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus testing-library/react-testing-library

Alle Issues in testing-library/react-testing-library

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.