[테스트코드 입문] 웹 애플리케이션 통합 테스트

오늘 읽은 범위

7장 웹 애플리케이션 통합 테스트

책에서 기억하고 싶은 내용을 써보세요.

1. React context와 통합테스트

• 테스트용 컴포넌트를 만들어 인터랙션 실행하기

'test('showToast를 호출하면 Toast 컴포넌트가 표시된다', async () => {
	const message = "test";
	render(
		<ToastProvider>
			<TestComponent message={message}/>
		</ToastProvider>
	);
	// 처음에는 토스트가 표시되지 않는다.
	expect(screen.queryByRole('alert')).not.toBeInTheDocument();
	await user.click(screen.getByRole('button'));
	// 토스트가 렌더링 됐는지 확인한다.
	expect(screen.queryByRole('alert')).not.toHaveTextContent(message);
})

• 초기값을 주입해서 렌더링된 내용 확인하기

2. Next.js 라우터와 렌더링 통합 테스트

• next-router-mock은 jest에서 next.js의 라웉러를 테스트할 수 있도록 목 객체를 제공하는 라이브러리
• mockRouter.setCurrentUrl : 테스트환경에 url을 설정할 수 있다.

test('현재 위치는 mypage이다'. () => {
	mockRouter.setCurrentUrl('/mypage');
})

• test.each : 동일한 테스트를 매개변수만 변경해서 반복하고 싶을 때 사용

3. React Hook Form을 활용한 폼 유효성 검사 테스트

• handleSubmit의 인자 onValid와 onInvalid를 활용하여 유효한 내용이 전송되는지 테스트

4. MSW

• 네트워크 계층의 목객체를 만드는 라이브러리. 웹 API 요청을 가로채서 임의의 값으로 만든 응답으로 대체할 수 있다.
• msw/node에서 제공하는 setupSever함수로 jest용 설정 함수를 만든다. 요청 핸들러를 setupServer함수에 가변 인수로 넘기면 요청을 가로챙 수 있다.