Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

618
Vistas
React Testing Library: cómo ver el estado actual del DOM al realizar pruebas

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/

ingrese la descripción de la imagen aquí

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")

ingrese la descripción de la imagen aquí

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:

  1. ¿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

  2. ¿Puedo tomar una captura de pantalla del DOM (supongo que no porque esto no es realmente sin cabeza) y mirarlo?

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

¿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 )

Biblioteca de prueba de reacción de depuración de 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(); }); });
  • Introducción: https://www.jest-preview.com/docs/getting-started/intro
  • Guía de instalación: https://www.jest-preview.com/docs/getting-started/installation
about 4 years ago · Juan Pablo Isaza Denunciar

0

Puede usar screen.debug() para depurar su documento o elementos https://testing-library.com/docs/queries/about/#screendebug

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda