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

Glitch

작성한 질문수

따라하며 배우는 리액트 테스트 [2023.11 업데이트]

Mock Service Worker

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

작성

262

강의 너무 잘 듣고있습니다 :)

선생님이 목서버를 설정해주실때 3가지를 설정해주셨는데

그 중에서 2번째인

" 테스트 중에 추가한 Request 핸들러들이 다른 테스트를 방해하지 않게 하기 위해 리셋을 해준다" 라고 하였는데,

이때 방해를 하는 상황이 어떤것이고 이것을 리셋안하게 되면 어떠한 현상이 일어나는건가요..?

단순하게 왜 리셋을 하는지는 알겠는데 그 하는 이유가 제가 아직 경험하지 못한 상황이라 궁금합니다!

테스팅 jest 모킹 react React-Context 웹앱

퀴즈

여행 상품 판매 앱의 클라이언트 구조에서 주요 3가지 페이지는 무엇인가요?

상품 목록, 장바구니, 결제

주문 페이지, 요약 페이지, 완료 페이지

로그인, 회원가입, 마이페이지

홈, 검색, 상세 페이지

답변 1

John Ahn

지식공유자

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

우선 여기에 코드를 보면

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 데이터가 없기 때문입니다 !

수고하세요 ~!!

Glitch

작성한 질문수

전체 Q&A

질문하기