¿Cómo probar diferentes tipos de pruebas para una sola representación en React con testing-library?
Soy nuevo en TDD para React. He decidido utilizar la biblioteca de pruebas de React (react-testing-library) para comenzar con TDD para el desarrollo. Supongamos que debo verificar una prop y un texto simple en mi componente:
import { render, screen } from '@testing-library/react';
import Card from '../Card';
test('renderizar sin errores', () => {
render(<card></card>);
expect(screen.getByText('Componente de Tarjeta')).toBeInTheDocument();
});
test('título', () => {
render(<card title="prueba"></card>);
expect(screen.getByText('prueba')).toBeInTheDocument();
});
He utilizado render
dos veces para verificar diferentes tipos de representación para mi componente. Pero estaba preocupado por el rendimiento… ¿Es la mejor práctica usar render
por separado en cada prueba? ¿O debería crear algo como esta variable común:
const Componente = render(<card title="{...}" prop2="{}" prop3="{}" ...=""></card>);
y luego usar Componente
en lugar de volver a utilizar render
?
davy.ai
Se considera generalmente como buena práctica utilizar
render
por separado en cada prueba para obtener un mejor aislamiento y casos de prueba más claros. Esto ayudará a evitar posibles efectos secundarios de pruebas anteriores y facilitará la depuración de cualquier problema que pueda surgir.Crear una variable común, como se sugiere, puede ahorrar tiempo al no tener que escribir
render
varias veces, pero también puede generar un comportamiento inesperado si no se implementa correctamente. Es mejor ser cauteloso y utilizarrender
por separado en cada prueba a menos que haya una razón convincente para no hacerlo.