inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트

async-await 이 꼭 있어야하는지 질문입니다

해결된 질문

337

김하진

작성한 질문수 1

2

 

안녕하세요. 강의 너무 재밌게 잘 보고 있습니다.

두가지 질문이 있어서 문의글 남깁니다.

 

 

질문 1. 테스트코드에서 async, await 가 필요없어 보이는 곳에도 꼭 붙이는 이유가 있나요?

예를들면, 아래 1번 코드에서 async await 이 반드시 필요한 이유가 있는건가요? 저는 2번처럼 async-await을 제거해도 테스트가 정상 통과 되어서요. 특별한 목적이 있어서 붙여야 하는건지 궁금합니다. !

 

1)

it('총 상품 금액은 "$500.00"로 노출된다', async () => { 
   await render(<TestPayment />);

   expect(screen.getByText('500.00')).toBeInTheDocument(); 
});

 

2)

it('총 상품 금액은 "$500.00"로 노출된다', () => { 
   render(<TestPayment />);

   expect(screen.getByText('500.00')).toBeInTheDocument(); 
});

 

 

질문 2. render 함수를 util 로 만들어서 사용하시는데, userEvent.setup의 user 도 함께 들어있는 이유가 궁금합니다.

userEvent를 쓰지 않는 테스트코드도 있는데, 꼭 함께 들어있어야하나 하는 생각이 들어서요 ㅎㅎ

userEvent를 더 편리하게 사용하기 위함인가요?

export default async (component, options = {}) => {
  const { routerProps } = options;
  const user = userEvent.setup();

  return {
    user,
    ...render(
      <QueryClientProvider client={queryClient}>
        <MemoryRouter {...routerProps}>{component}</MemoryRouter>
        <Toaster />
      </QueryClientProvider>,
    ),
  };
};

 

감사합니다!

javascript react 소프트웨어-테스트 vitest

답변 1

0

코드 조커, 오프

안녕하세요 하진님~! 문의주신 질문 답변 드리겠습니다.

질문 1. 테스트코드에서 async, await 가 필요없어 보이는 곳에도 꼭 붙이는 이유가 있나요?

-> 우선 예제 코드에 render.jsx에 있는 함수가 async로 작성되어 있어서 await를 호출하였는대요. 다시 코드를 보니 사실상 promise를 쓰는 부분이 전혀 없어서..말씀하신대로 async,await가 현재는 필요없는 상황이네요. 이 부분은 저희가 초반에 코드를 작성하고 수정하는걸 놓쳤네요..!

결론적으로 현재 테스트 코드에서 render 함수 호출 시 async,await는 필요 없습니다

 

질문 2. render 함수를 util 로 만들어서 사용하시는데, userEvent.setup의 user 도 함께 들어있는 이유가 궁금합니다.

-> 넵 해당 부분은 말씀하신대로 이벤트 시뮬레이션을 좀 더 편리하게 하기 위함입니다. 안그러면 이벤트 시뮬레이션이 필요한 테스트 파일에서 호출해줘야 하는 번거로움이 있어 객체에 함께 포함시켜두었습니다! 😀
(공식 홈페이지에서 가이드하는 내용이기도 합니다!)

 

이외에 다른 질문 있으시면 편하게 문의 주세요. 감사합니다!

mockZustand

0

67

2

프로젝트 세팅 오류 및 버전 오류 문제 문의

0

97

2

toggleIsModalOpened 테스트 할때 궁금한 점이 있습니다.

0

43

2

로딩/에러처리 검증은 어떻게 하는게 좋을까요?

0

65

1

통합 테스트에서 API 요청에 대한 검증은 이루어지지 않아도 괜찮을까요?

0

71

2

lint에러..

0

74

1

단언문 순서에 따라 테스트 결과가 왜 달라지나요?

0

109

2

useNavigate 테스트 시, 검증 대상 질문입니다.

0

113

2

강의 예시프로젝트 업데이트좀 부탁드립니다.

2

166

2

통합테스트와 단위테스트 파일 분리

0

109

1

grid 양옆에 margin은 어디서 설정되어있는건가요 ?

0

131

1

vitest 설치했는데

0

207

2

2부 할인쿠폰 관련

0

177

1

에러 해결 방법

0

407

2

직접 구현한 atom 컴포넌트 테스트 범위 질문

0

175

1

setup, teardown 동작 순서

0

212

1

debounce 함수 테스트 정확도 관련 질문입니다.

0

177

2

ProductFilter test 어떤 방식이 더 선호되는 방식일까요?

0

204

2

통합 테스트 작성 방식에 대해 궁금한 점이 있습니다

0

259

2

vitest Extension 알려주세요.

0

268

1

2.1 강의 질문있습니다.

0

140

1

useNavigate()을 검증할 때 이해가 안되는 부분이 있습니다.

0

248

2

toHaveStyle 메서드 사용이 조금 이상한 것 같습니다.

0

196

2

TestPayment에 쿠폰 정보를 prop으로 전달하는 이유

0

186

2