如何循环以期望开玩笑中的项目列表

Question

我已经添加了下面的笑话单元测试来呈现一个组件，我希望它的一些元素使用“getAllByText”，因为有多个相似的元素。如果有超过 1 个元素，我会收到一条评论循环遍历元素列表，并希望它们中的每一个都可见。有人可以帮我修改测试以遍历所有元素吗？

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('6.24')[0]).toBeVisible();
  });

查看评论 -> “如果预计会有超过 1 个项目，那么请遍历列表并期望每个元素都可见如果应该只有 1 个项目，那么请确定如何使用 getByText。

衷心感谢您的快速帮助。

Answer 1

只需使用 for 循环。

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

对于没有 for..of 循环的实现：

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

或者：

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

如何循环以期望开玩笑中的项目列表

how to loop to expect a list of item in jest

javascript

unit-testing

reactjs

ts-jest