I have added the below jest unit test to render a component and I am expecting some of its elements using "getAllByText" as there are multiple similar elements. I got a review comment 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 comments -> "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".
A quick help is heartily appreciated.
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();
});