Erwägen Sie die Verwendung der Testumgebung „jsdom“.

Ich habe diesen einfachen Test:

import React from 'react'
import { render } from '@testing-library/react'

import Button from '.'

describe('Button', () => {
  it('renders button without crashing', () => {
    const label="test"

    render(<Button label={label} />)
  })
})

Und ich habe eine jest.config.json mit diesem Inhalt

{
  "setupFilesAfterEnv": [
    "<rootDir>/lib/settings/setupTests.ts"
  ]
}

Und auf meinem setupTests.ts Ich habe

import '@testing-library/jest-dom'

Wenn ich renne npm run test (die einfach laufen jest), ich habe die folgende Fehlermeldung erhalten:

Der folgende Fehler kann durch die Verwendung der falschen Testumgebung verursacht werden, siehe
https://jestjs.io/docs/configuration#testenvironment-string.

Erwägen Sie die Verwendung der Testumgebung „jsdom“.

Was mache ich falsch? Das funktionierte vor einem Upgrade.

In deinem package.jsonoder jest.config.js/jest.config.ts Datei, ändern Sie den Wert der testEnvironment Eigentum zu jsdom.

package.json

"jest":{
    "testEnvironment": "jsdom"
}

jest.config.[js|ts]

module.exports = {
    "testEnvironment": "jsdom"
}

Wichtiger Hinweis für Witze >28

Wenn Sie Jest 28 verwenden, müssen Sie es installieren jest-environment-jsdom getrennt durch entweder:

npm: npm i jest-environment-jsdom --save-dev

Garn: yarn add -D jest-environment-jsdom

Warum?

Standardmäßig verwendet Jest die node Test Umgebung. Dies macht im Wesentlichen alle Tests ungültig, die für eine Browserumgebung gedacht sind.

jsdom ist eine Implementierung einer Browserumgebung, die diese Art von UI-Tests unterstützt.

Für Jest Version 28 und höher: jest-environment-jsdom wurde aus der Standardeinstellung entfernt jest Installation, um die Paketgröße zu reduzieren.

Zusätzliche Lektüre

jest testEnvironment-Dokumentation

Scherz 28 bahnbrechende Änderungen

Dies kann auf Testdateibasis gelöst werden, indem a hinzugefügt wird @jest-environment docblock an den Anfang Ihrer Datei. Zum Beispiel:

/** @jest-environment jsdom */
import React from 'react'
import { render } from '@testing-library/react'

import Button from '.'

describe('Button', () => {
  it('renders button without crashing', () => {
    const label="test"

    render(<Button label={label} />)
  })
})

Wenn Ihr Projekt eine Mischung aus UI- und Nicht-UI-Dateien enthält, ist dies oft besser, als das gesamte Projekt durch Einstellung zu ändern "testEnvironment": "jsdom" innerhalb Ihrer package.json- oder Jest-Konfiguration. Durch das Überspringen der Initialisierung der JSDom-Umgebung für Nicht-UI-Tests kann Jest Ihre Tests schneller ausführen. Tatsächlich ist das der Grund, warum Jest hat die Standardtestumgebung in Jest 27 geändert.

Standardmäßig ist der Wert für testEnvironment Knoten Dadurch werden alle Testfälle in der node.js-Umgebung ausgeführt, aber js-dom bietet eine browserähnliche Umgebung. Anstatt einen jsdom-Wert hinzuzufügen, können Sie sogar einen dateispezifischen Wert wie unten hinzufügen, was funktioniert.

/**
 * @jest-environment jsdom
 */
// the above comment helps
test('use jsdom in this test file', () => {
  const element = document.createElement('div');
  expect(element).not.toBeNull();
});

Wir können sogar testdateispezifische Umgebungen hinzufügen, siehe diesen Link.

https://jestjs.io/docs/configuration#testenvironment-string

Versuche dies.

module.exports = {
testEnvironment: 'jsdom',

}