Considere usar el entorno de prueba “jsdom”

Tengo esta prueba simple:

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} />)
  })
})

y tengo un jest.config.json con este contenido

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

y en mi setupTests.ts Tengo

import '@testing-library/jest-dom'

cuando corro npm run test (que solo corre jest), Tuve el siguiente error:

El siguiente error puede deberse al uso de un entorno de prueba incorrecto, consulte
https://jestjs.io/docs/configuration#testenvironment-string.

Considere usar el entorno de prueba “jsdom”.

¿Que estoy haciendo mal? Esto solía funcionar antes de una actualización.

En tus package.jsono jest.config.js/jest.config.ts archivo, cambie el valor del testEnvironment propiedad a jsdom.

package.json

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

jest.config.[js|ts]

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

Nota importante para broma >28

Si está utilizando jest 28, deberá instalar jest-environment-jsdom por separado por:

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

hilo: yarn add -D jest-environment-jsdom

¿Por qué?

Por defecto, jest usa el node entorno de prueba. Básicamente, esto hace que cualquier prueba destinada a un entorno de navegador no sea válida.

jsdom es una implementación de un entorno de navegador que admite este tipo de pruebas de interfaz de usuario.

Para Jest versión 28 y superior, jest-environment-jsdom fue eliminado del valor predeterminado jest instalación para reducir el tamaño del paquete.

Lectura adicional

jest testEnvironment documentación

Broma 28 cambios importantes

Esto se puede resolver por archivo de prueba agregando un @jest-environment docblock al principio de su archivo. Por ejemplo:

/** @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} />)
  })
})

Si su proyecto tiene una combinación de archivos UI y no UI, a menudo es preferible cambiar todo el proyecto configurando "testEnvironment": "jsdom" dentro de su configuración de package.json o Jest. Al omitir la inicialización del entorno JSDom para pruebas que no son de interfaz de usuario, Jest puede ejecutar sus pruebas más rápido. De hecho, es por eso que Jest cambió el entorno de prueba predeterminado en Jest 27.

por defecto, el valor para testEnvironment es nodo que ejecuta todos los casos de prueba en el entorno node.js, pero js-dom proporciona un navegador como entorno. en lugar de agregar el valor jsdom, incluso puede agregar un valor específico del archivo como el que se muestra a continuación, que funcionará.

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

Incluso podemos agregar entornos específicos de archivos de prueba, consulte este enlace.

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

Prueba esto.

module.exports = {
testEnvironment: 'jsdom',

}