ReactJS – Probando un componente toHaveAttribute funciona en un caso pero falla en otro.
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.
davy.ai
El problema aquí es que el atributo
isActive
no es un atributo en el elementoSegmentContainer
. En cambio, es una propiedad que se pasa al componente estilizado utilizando la sintaxisisActive={isActive}
.Cuando se consulta el atributo
isActive
,react-testing-library
busca un atributo HTML llamadoisActive
, que no existe. Para solucionar esto, debes utilizar el comparadortoHaveStyle
para probar los estilos aplicados aSegmentContainer
basados en sus propiedades:Esto asume que la propiedad
isActive
se utiliza para establecer elbackground-color
deSegmentContainer
en función de si es el mes actual o no. Debes ajustar los estilos pasados atoHaveStyle
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 queisActive
es una propiedad, no un atributo, y debe ser probado utilizando el comparadortoHaveStyle
en lugar detoHaveAttribute
.