es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • ReactJS – Probando un componente toHaveAttribute funciona en un caso pero falla en otro.

ReactJS – Probando un componente toHaveAttribute funciona en un caso pero falla en otro.

21 Jul, 2023 Programación

Estoy escribiendo una prueba con jest, jest-dom y react-testing-library.

Tengo 2 componentes en mi aplicación React:

// Componente 1

<navitem icon=""></navitem><icon></icon>}
  text="Página de inicio"
  toggled={toggled}
  to={routesPaths.homepage}
  disabled={isDatabaseEmpty}
  dataTestId="sidebar-homepage"
/>

// <navitem> es una instancia de <container> que extiende <link> con styled-components:

const Container = styled(Link)`
  ${container}
`;

<container active="{isActive}" toggled="{toggled" 1="" :="" 0}="" to="{to}" disabled="{disabled}" data-testid="{dataTestId}">
  {icon}
  <text toggled="{toggled}">{text}</text>
</container>

// Componente 2

<segment onclick="{()" ==""> setSelectedSegment(segmentTitle)}
  isActive={isCurrentMonth}
  key={key}
  label="Este mes"
  dataTestId="segment-this-month"
/>

// <segment> es una instancia de <segmentcontainer> que extiende un <div> con styled-component:

const SegmentContainer = styled.div<{ isActive: boolean }>`
  ${segment}
`;

<segmentcontainer isactive="{isActive}" onclick="{onClick}" data-testid="{dataTestId}">
  {label}
</segmentcontainer>

Cuando consulto estos componentes por el id de prueba (en la misma prueba), solo uno de ellos pasa:

const sidebarElement = screen.getByTestId('sidebar-homepage') // ✅ Pasa
expect(sidebarElement).toHaveAttribute('active', '1'); // ✅ Pasa

const segmentThisMonth = screen.getByTestId('segment-this-month') // ✅ Pasa
expect(segmentThisMonth).toHaveAttribute('isActive', '1'); // ❌ Falla

// Resumen del error
//
// expect(element).toHaveAttribute("isActive", "1") // element.getAttribute("isActive") === "1"
// Se esperaba que el elemento tuviera el atributo:
//   isActive="1"
// Recibido:
//   null

¿Por qué no se recibe isActive al consultar el elemento en el último caso?

¿Hay algo especial en styled que no está presente en styled.div?

No hace falta decir que la prop isActive funciona correctamente cuando se ejecuta la aplicación normalmente.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema aquí es que el atributo isActive no es un atributo en el elemento SegmentContainer. En cambio, es una propiedad que se pasa al componente estilizado utilizando la sintaxis isActive={isActive}.

    Cuando se consulta el atributo isActive, react-testing-library busca un atributo HTML llamado isActive, que no existe. Para solucionar esto, debes utilizar el comparador toHaveStyle para probar los estilos aplicados a SegmentContainer basados en sus propiedades:

    const segmentThisMonth = screen.getByTestId('segment-this-month');
expect(segmentThisMonth).toHaveStyle(`
  background-color: ${isCurrentMonth ? 'gray' : 'lightgray'};
`);

    Esto asume que la propiedad isActive se utiliza para establecer el background-color de SegmentContainer en función de si es el mes actual o no. Debes ajustar los estilos pasados a toHaveStyle para que coincidan con lo que realmente se aplica en tu aplicación.

    En resumen, styled<link> no es especial en este sentido. El problema aquí es que isActive es una propiedad, no un atributo, y debe ser probado utilizando el comparador toHaveStyle en lugar de toHaveAttribute.

Comments are closed.