Estoy usando reaccionar, así que antes de cada prueba necesito crear un elemento contenedor. Actualmente, tengo algo como esto:
import { screen } from '@testing-library/react'; import { render, unmountComponentAtNode } from 'react-dom'; import Form from './Form'; let container: Element | null = null; // setup a DOM element as a render target beforeEach(() => { container = document.createElement('div'); document.body.appendChild(container); }); // cleanup on exiting afterEach(() => { unmountComponentAtNode(container!); container?.remove(); container = null; }) test('renders with a heading', () => { render( <Form heading={'Form Heading'} />, container ); const element = screen.getByText(/form heading/i); expect(element).toBeInTheDocument(); }); Como probablemente esperaba, necesito hacer la configuración beforeEach y afterEach para cada archivo de prueba. ¿Se puede hacer esto global (después de ser global, todavía necesitamos acceder a la variable del container )? ¡Esperamos su respuesta!
Si bien esta no es técnicamente la respuesta a la pregunta que hizo, esta es la solución al problema subyacente que tiene.
Estás importando el render incorrecto:
import { render, unmountComponentAtNode } from 'react-dom';
La función de render importada de react-dom se usa para mostrar el resultado en el navegador, no para realizar pruebas.
Necesitas: import {render} from '@testing-library/react' . La biblioteca de prueba hace toda la gestión de contenedores por usted.
Si realmente necesita el contenedor para cualquier cosa, aún puede hacer:
const {container} = render(/* ... */);Pero la mayoría de las veces eso no es necesario.