Hay una situación en la que algunas identificaciones de prueba no deberían estar presentes en el DOM y deben probarse.
Por ejemplo:
describe('MyModal', () => { const testIds = [ 'first-test', 'second-test', 'third-test' ]; it('should not render MyModal', () => { const { getByTestId } = renderWithClientInstance( <MyModal open={false} } /> ); testIds.forEach((testId) => expect(getByTestId(testId)).not.toBeInTheDocument()); }); });Pero esta prueba falla con el siguiente mensaje de error:
TestingLibraryElementError: no se puede encontrar un elemento por: [data-testid="first-test"]
¿Cómo debería escribirse para verificar si esas identificaciones de prueba no están en el DOM?
La solución es usar queryByTestId en lugar de getByTestId porque no falla cuando el elemento consultado no existe, sino que devuelve un valor o un valor null .
describe('MyModal', () => { const testIds = [ 'first-test', 'second-test', 'third-test' ]; it('should not queryByTestId MyModal', () => { const { queryByTestId } = renderWithClientInstance( <MyModal open={false} } /> ); testIds.forEach((testId) => expect(queryByTestId(testId)).toBeNull()); }); });