Trying to test two check boxes in modal react testing library

Question

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(); 

Answer 1

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();