인프런 커뮤니티 질문&답변

it('보여줄 상품 리스트가 더 있는 경우 show more 버튼이 노출되며, 버튼을 누르면 상품 리스트를 더 가져온다.', async () => {
  const { user } = await render(<ProductList limit={PRODUCT_PAGE_LIMIT} />);
  await screen.findAllByTestId('product-card');
  const showMoreButton = screen.getByRole('button', {
    name: 'Show more',
  });
  expect(showMoreButton).toBeInTheDocument();
  await user.click(showMoreButton);

  expect(await screen.findAllByTestId('product-card')).toHaveLength(
    PRODUCT_PAGE_LIMIT * 2,
  );
});

여기서 render 이후에 await screen.findAllByTestId('product-card'); 를 하는 이유가 있나요? 저걸 해주지 않으면 버튼이나 상품 아이템을 그리지 못하는 건 아는데... 그려지는 이유를 모르겠어서요 await로 찾을때까지 대기하는 걸로 이해하면 될까요?

1. 그렇다면 render 호출 이후 요소를 찾지 않아도 되는 경우에도 await screen.findAllByTestId('product-card');를 해주어야 하는걸까요?

2. 아래와 같이 하는거랑 차이가 있나요?

it('보여줄 상품 리스트가 더 있는 경우 show more 버튼이 노출되며, 버튼을 누르면 상품 리스트를 더 가져온다.', async () => {
  const { user } = await render(<ProductList limit={PRODUCT_PAGE_LIMIT} />);
  const showMoreButton = await screen.findByRole('button', {
    name: 'Show more',
  });
  expect(showMoreButton).toBeInTheDocument();
  await user.click(showMoreButton);

  expect(await screen.findAllByTestId('product-card')).toHaveLength(
    PRODUCT_PAGE_LIMIT * 2,
  );
});