I have a modal that has two checkboxes. One is checked and the other is not (by default). I am trying to write a test that finds box checkboxes with their default values.
<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>
I tried queryByRole but it found multiple checkboxes. So I am trying to see how I can distinguish between both. any thoughts.
const checkbox = screen.queryByRole('checkbox');
expect(checkbox).toBeChecked();
If the postion of these checkboxes remains constant when this page is rendered, then you could find all of them using getAllByRole (this returns all checkboxes found in an array) and then assert their values e.g.
const checkboxes = screen.getAllByRole('checkbox');
expect(checkboxes[0]).not.toBeChecked();
expect(checkboxes[1]).toBeChecked();