Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

129
Visualizações
¿Cuáles son las posibilidades de obtener las propiedades de los componentes del sitio web en ejecución para la prueba unitaria de la aplicación React?

Entorno: tengo un componente de reacción muy complejo y grande que representa básicamente una hoja de cálculo, donde necesito resaltar algunas celdas. Consume 30 propiedades que se pasan tanto desde redux connect HOC como desde el lugar donde se usa para renderizar. Algunas de estas propiedades son objetos complejos.

Entonces, una vez más: el componente de reacción es grande y requiere una gran cantidad de entradas complejas como accesorios.

Necesidad: necesito probar si mis cambios aplican clases específicas en lugares específicos. Por lo tanto, necesito representar este componente y proporcionarle datos que hagan que las celdas se resalten.

Pregunta: ¿Existe la posibilidad de obtener accesorios de la página en vivo en un formulario que se pueda usar en el código para las pruebas?

Limitaciones conocidas:

  1. Puedo poner un punto de interrupción e inspeccionar las propiedades cuando se construirá el componente o se llamará a algún método de ciclo de vida, pero Chrome devtools recorta los resultados largos. Teniendo en cuenta el hecho de que tengo objetos complejos como propiedades, obtengo una representación recortada de estos objetos.
  2. Intenté JSON.stringify object y console.log , pero la cadena en la consola también termina con tres puntos (por lo que se cortó).
about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

El componente no puede ser tan grande que sea difícil de probar. Rómpalo si puede. Esta es la causa raíz.

La solución que aterricé en mi realidad donde no puedo reescribir todo durante el transcurso de unos meses fue crear manualmente todas las propiedades necesarias a mano. Esto es:

  • ves en el código lo que realmente pones allí como propiedades
  • pones solo los datos requeridos
  • usted ve cómo cambia su componente cuando las cosas que usted controla y ve cambian
  • las instantáneas y los archivos auxiliares con datos tienen el menor tamaño posible

===========

Camino que he descubierto que es posible, pero tiene inconvenientes.

Para obtener datos que tienen dependencias cíclicas, se puede usar https://www.npmjs.com/package/flatted .

  1. Vaya a github del proyecto flatted , copie el código y péguelo en Chrome Dev Console
  2. Componente abierto en React Dev Tools en Chrome
  3. busque por nombre del componente, guarde los props necesarios como variable global en la consola (haga clic con el botón derecho en el nombre de la propiedad)
  4. use flatted para aplanar el objeto y cópielo como una cadena en su proyecto
  5. importe flatted en su proyecto, utilícelo para analizar la versión en cadena de Chrome Dev Tools
  6. utilizar datos en sus pruebas.

Inconvenientes:

  1. tiene acceso (ve en su editor) a una versión de datos en cadena, que no puede razonar ni modificar. Lo que significa que, hasta cierto punto, operará a ciegas en un objeto enorme (y es posible que su prueba necesite cambiar datos de cinco niveles de profundidad)
  2. El tamaño de esta versión en cadena puede ser grande y si realiza una prueba de instantáneas, esto significa que tendrá esta enorme cantidad de datos en pocos archivos.
  3. necesita trabajo manual con esta prueba de "caja negra/gris" cuando algo cambia: obtenga nuevos datos, asegúrese de que todas las pruebas funcionen con estos nuevos datos, etc.
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda