Tengo un modal que tiene dos casillas de verificación. Uno está marcado y el otro no (por defecto). Estoy tratando de escribir una prueba que encuentre casillas de verificación con sus valores predeterminados.
<Checkbox float="left" paddingTop="20px" mr="10px" borderColor="gray.50" /> <TextContainer textStyle="textSm" fontWeight="normal" pt="25px"> Make Account Admin </TextContainer> <Checkbox defaultChecked={welcomeEmail} float="left" paddingTop="1%" paddingBottom="5%" mr="10px" borderColor="gray.50" /> <TextContainer textStyle="textSm" fontWeight="normal" pt="2px"> Send welcome emails </TextContainer>Probé queryByRole pero encontró varias casillas de verificación. Así que estoy tratando de ver cómo puedo distinguir entre ambos. Alguna idea.
const checkbox = screen.queryByRole('checkbox'); expect(checkbox).toBeChecked();Si la posición de estas casillas de verificación permanece constante cuando se representa esta página, entonces podría encontrarlas todas usando getAllByRole (esto devuelve todas las casillas de verificación encontradas en una matriz) y luego afirmar sus valores, por ejemplo
const checkboxes = screen.getAllByRole('checkbox'); expect(checkboxes[0]).not.toBeChecked(); expect(checkboxes[1]).toBeChecked();