Recientemente heredé un código base con el requisito de usar RTL (actualmente usando Enzyme). Muchas de las pruebas de enzimas son bastante simples y pasan sin problemas:
const render = ({ firstName, surname } = {}) => { const props = { firstName, surname }; return shallow(<MyComponent {...props} />); }; test('renders firstName and surname', () => { expect( render({ firstName: 'My first name', surname: 'My surname', }) ).toMatchSnapshot(); });Sin embargo, tengo problemas para migrar esta prueba a React Testing Library: tengo el siguiente como un punto de partida muy aproximado, pero sé que no es del todo correcto. ¿Alguien puede sugerir documentos útiles para conceptos básicos como este o sugerir mejoras en el código? AIT
test('renders firstName and surname', () => { props = { firstName, surname }; render(<MyComponent {...props} />); expect(screen.getByText(props.firstName)).toBe('My first name'); expect(screen.getByText(props.surname)).toBe('My surname'); });Como alguien que también tuvo que trabajar con ambos, aprendí que RTL es muy diferente conceptualmente a la enzima. RTL desaconseja hacer afirmaciones de utilería, en su lugar, recomienda escribir pruebas dirigidas por el usuario. Entonces, mi principal sugerencia de mejora sería pensar y preguntarse antes de escribir una prueba "¿qué ve el usuario ahora?" o "¿qué cambió en la pantalla para el usuario?".
En la prueba anterior, básicamente está verificando que los accesorios sean lo que usted definió, que es cómo se hacen las cosas en la enzima, pero cuando se detiene a pensar en ello, es bastante redundante.
Entiendo completamente que algunos componentes son bastante simples y no tienen mucho que probar en ellos, por lo que, en ese caso, volvería a escribir sus pruebas de la siguiente manera para estar más alineado con el espíritu de RTL, que en este caso es algo en la línea de "¿el usuario ve lo que espero que vea?". También recomiendo poner sus consultas de elementos en variables para una mejor legibilidad.
it('renders firstName and surname', () => { const props = { firstName: 'My first name', surname: 'My surname', }; render(<MyComponent {...props} />); const firstName = screen.getByText(props.firstName); const surname = screen.getByText(props.surname); expect(firstName).toBeInTheDocument(); expect(surname).toBeInTheDocument(); });