Actualmente estoy trabajando en la creación de pruebas unitarias para mi proyecto, la parte del código en la que estoy escribiendo las pruebas se ve así:
{errors.map(error => ( <li data-testid={`${error.key}-error-item`} key={error.key} className={error.className} > <Container>{error.message}</Container> </li> ))}Utilizo una clave `data-tested' dinámica para obtener este elemento dentro de las pruebas. Mi prueba se ve así:
... expect(screen.queryAllByTestId(`${error.key}-error-item`).length).toEqual(1) ...Pero esta prueba falla, por favor dígame, ¿cómo puedo obtener elementos por `propiedad dinámica de datos probados?
Debe iterar a través de los mismos errores que pasa (o espera recibir en su componente). Por ejemplo, el siguiente componente:
import React from 'react'; const MyComponent = ({errors}) => <div> {errors.map(error => ( <li data-testid={`${error.key}-error-item`} key={error.key} className={error.className} > <div>{error.message}</div> </li> ))} </div> export default MyComponent;pasará la siguiente prueba absolutamente bien:
import { render, screen } from '@testing-library/react'; import MyComponent from './features/test-feature'; const ERRORS = [{key: 1, className: 'class1'}, {key: 2, className: 'class2'} ] test('renders learn react link', () => { render(<MyComponent errors={ERRORS}/>); for(let error of ERRORS){ expect(screen.queryAllByTestId(`${error.key}-error-item`).length).toEqual(1) } });