Tengo un componente como este:
const MyComponent = ({ foo }) => ( <> <div> <Header /> {foo} </div> <div data-testid="self-closing-tag" className={styles.break} /> </> )(nb React debería manejar el div como una etiqueta de cierre automático, mientras que sin reaccionar eso no es html válido)
Escribí una prueba que representa mi componente <div data-testid="foo" /> para foo prop y ejecuta expect(screen.getByTestId('foo')).toBeInTheDocument(); que pasa Si uso screen.debug en esa prueba, obtengo el DOM completamente renderizado.
Pero cuando escribo una prueba para la etiqueta de cierre automático, así: expect(screen.getByTestId('self-closing-tag')).toHaveClass('break'); Yo obtengo:
No se pudo obtener el elemento por:
[data-testid="self-closing-tag"]
y donde esperaría que imprimiera el DOM completamente renderizado, simplemente imprime <body /> .
Si pongo la aserción esperada para la etiqueta de cierre automático en la prueba de 'foo', ambos pasan.
describe('<My Component />', () => { beforeEach(<MyComponent foo={<div data-testid="foo" />} />); it('renders foo', () => { expect(screen.getByTestId('foo')).toBeInTheDocument(); // expect(screen.getByTestId('self-closing-tag')).toHaveClass('break'); -- this passes if uncommmented! }; it('renders the self closing tag', () => { expect(screen.getByTestId('self-closing-tag')).toHaveClass('break'); // cannot find element, prints '<body />' as the DOM. }) }) Obviamente puedo poner todo en la it declaración, pero prefiero no hacerlo si es posible. También me gustaría entender qué está pasando.
¿Qué he hecho mal?
Eso es porque toHaveClass espera un argumento con el nombre de la clase, puede consultar los documentos aquí .
Entonces, tu prueba podría ser:
expect(screen.getByTestId("self-closing-tag")).toHaveClass("XX class name you expect XX");o si solo desea verificar si el elemento tiene la clase de atributo
expect(screen.getByTestId("self-closing-tag")).toHaveAttribute("class");