안녕하세요! 핸들러들을 리셋하는것에 대해서 궁금한게 있습니다.

안녕하세요 좋은 질문 감사합니다 !!

우선 여기에 코드를 보면

test("when fetching product datas, face an error", async () => {
server.resetHandlers(
rest.get("http://localhost:5000/products", (req, res, ctx) => {
return res(ctx.status(500));
})
);

render(<Type orderType="products" />);

const errorBanner = await screen.findByTestId("error-banner");
expect(errorBanner).toHaveTextContent("에러가 발생했습니다.")
});

resetHandlers를 이용해서 일부로 에러를 만들었습니다.
에러를 만들때 원래 서버에서 보내줘야할 products 데이터를 없애고 에러 코드를 500을 줘서 서버에서 에러를 받게 한거인데요.

그러면 제가 이 테스트 아래에다가

test("displays product images from server", async () => {
render(<Type orderType="products" />);

 // 이미지 찾기
const productImages = await screen.findAllByRole("img", {
name: /product$/i,
});
expect(productImages).toHaveLength(2);

const altText = productImages.map((element) => element.alt);
expect(altText).toEqual(["America product", "England product"]);
});

이 테스트를 추가하면 어떻게 될까요?
에러가 안납니다. 왜냐면 products를 가져올 때 이미 resetHandlers가 돌아가서 500에러를 보내주는게 아닌 올바른 products 데이터를 가져오기 떄문입니다. 하지만

beforeAll(() => server.listen());

// afterEach(() => server.resetHandlers());

afterAll(() => server.close());

이렇게 주석처리를 한 후 다시 테스트를 하면 에러가 나겠죠 ! 왜냐면 해당 테스트에서 필요한 products 데이터가 없기 때문입니다 !

수고하세요 ~!!

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