I have added the below jest unit test to render a ponent and I am expecting some of its elements using "getAllByText" as there are multiple similar elements. I got a review ment to loop over the list of element if there are more than 1 and expect each of them to be visible. Can someone please help me in modifying the test to loop over all the elements.

it('should render seat total wrapper on small breakpoint', () => {
    render(
      <MockViewportProvider viewSize={ViewSizes.SMALL}>
        <SeatMapContext.Provider value={{ state: contextObj, dispatch: noop }}>
          <SeatMapCabinAndSeatWrapper
            flightSeatMapPlaneData={seatMapPlanesData}
            flightLegsDetails={FlightLegsDetails}
            onChangeLegIndex={jest.fn}
            selectedLegIndex={0}
            handleLegendButtonClick={jest.fn()}
            handleApplySeatSelection={handleApplySeatSelection}
          />
        </SeatMapContext.Provider>
      </MockViewportProvider>
    );
    expect(screen.getByRole('button', { name: 'Next Flight' })).toBeVisible();
    expect(screen.getAllByText('$276.24')[0]).toBeVisible();
  });

Review ments -> "if there are expected to be more than 1 item then please loop over the list and expect each element to be visible if there should only be 1 item then please determine how to use getByText".

I have added the below jest unit test to render a ponent and I am expecting some of its elements using "getAllByText" as there are multiple similar elements. I got a review ment to loop over the list of element if there are more than 1 and expect each of them to be visible. Can someone please help me in modifying the test to loop over all the elements.

it('should render seat total wrapper on small breakpoint', () => {
    render(
      <MockViewportProvider viewSize={ViewSizes.SMALL}>
        <SeatMapContext.Provider value={{ state: contextObj, dispatch: noop }}>
          <SeatMapCabinAndSeatWrapper
            flightSeatMapPlaneData={seatMapPlanesData}
            flightLegsDetails={FlightLegsDetails}
            onChangeLegIndex={jest.fn}
            selectedLegIndex={0}
            handleLegendButtonClick={jest.fn()}
            handleApplySeatSelection={handleApplySeatSelection}
          />
        </SeatMapContext.Provider>
      </MockViewportProvider>
    );
    expect(screen.getByRole('button', { name: 'Next Flight' })).toBeVisible();
    expect(screen.getAllByText('$276.24')[0]).toBeVisible();
  });

Review ments -> "if there are expected to be more than 1 item then please loop over the list and expect each element to be visible if there should only be 1 item then please determine how to use getByText".

• javascript
• reactjs
• unit-testing
• ts-jest

Share Improve this question Follow edited Aug 27, 2022 at 13:01 Sunderam Dubey 8,8371212 gold badges2424 silver badges4242 bronze badges asked Feb 8, 2022 at 18:03 SaurabhSaurabh 4311 gold badge11 silver badge66 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Just use a for loop.

for (const element of screen.getAllByText('$276.24')) {
    expect(element).toBeVisible();
}

For an implementation with no for..of loop:

const list = screen.getAllByText('$276.24');
for (let i = 0; i < list.length; i++) {
    expect(list[i]).toBeVisible();
}

Or:

screen.getAllByText('$276.24').forEach((element) => {
    expect(element).toBeVisible();
});