Estoy aprendiendo React Testing Library (muchos años de experiencia en TDD en otros idiomas)
Esta documentación en React Testing Library dice que cuando getByText
falla, "sin embargo, imprime el estado de su DOM bajo prueba":
https://testing-library.com/docs/dom-testing-library/api-debugging/
Sin embargo, esto no me sucede en el RTL actual.
En su lugar, me sale esto:
● loads and displays greeting TestingLibraryElementError: Unable to find an element with the text: the current weather is: overcast clouds. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible. Ignored nodes: comments, <script />, <style /> <h1 data-testid="currentWeatherOutput" /> 27 | const currentWeatherOutput = screen.getByTestId('currentWeatherOutput') 28 | > 29 | getByText(currentWeatherOutput, "the current weather is: overcast clouds")
las dependencias de mi paquete son
"dependencies": { "@testing-library/jest-dom": "^5.16.1", "@testing-library/react": "^12.1.2", "@testing-library/user-event": "^13.5.0", "fetch": "^1.1.0", "msw": "^0.38.1", "node-fetch": "^3.2.0", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "5.0.0", "web-vitals": "^2.1.2" },
Tengo dos preguntas más:
¿Puedo ingresar a un depurador directamente dentro de mi código de prueba? https://testing-library.com/docs/dom-testing-library/api-debugging/ no menciona nada sobre el acceso a un depurador JS nativo
¿Puedo tomar una captura de pantalla del DOM (supongo que no porque esto no es realmente sin cabeza) y mirarlo?
¿Puedo tomar una captura de pantalla del DOM (supongo que no porque esto no es realmente sin cabeza) y mirarlo?
Sí. Absolutamente puedes. Echa un vistazo a Jest Preview ( https://github.com/nvh95/jest-preview )
Jest Preview te da la posibilidad de "ver" la interfaz de usuario de tu aplicación en un navegador, en lugar de HTML en la terminal, con solo 2 líneas de código:
import { debug } from 'jest-preview'; describe('App', () => { it('should work as expected', () => { render(<App />); debug(); }); });
Puede usar screen.debug() para depurar su documento o elementos https://testing-library.com/docs/queries/about/#screendebug