24.02.23 16:20 작성
·
399
·
수정됨
2
describe('로그인이 성공했을 경우', () => {
it('"아이디 저장" 체크박스를 체크했을 시 쿠키에 itall_admin 객체의 id key로 유저가 입력한 아이디를 저장한다.', async () => {
const { user } = await render(<LoginPage />);
const rememberIdCheckbox = screen.getByLabelText('아이디 저장');
const idInput = screen.getByPlaceholderText('아이디(이메일)');
const submitButton = screen.getByRole('button', { name: '로그인' });
const setCookies = vi.fn();
setCookies.mockReturnValueOnce('center.test@itall.com');
const cookieValue = setCookies();
await user.click(rememberIdCheckbox);
await user.type(idInput, 'center.test@itall.com');
await user.click(submitButton);
expect(cookieValue).toBe('center.test@itall.com');
})
})
Forms.spec.ts파일에서 js-cookie 라이브러리 모킹해서 하시는 예시를 보고 react-cookie 사용한 프로젝트의 테스트코드를 작성중인데요. 혹시 라이브러리에서 제공하는 함수를 이렇게 setCookies라는 함수를 임의로 모킹해서 return값을 지정해서 저렇게 처리해도 되는걸까요..? 테스트는 당연히 통과되었습니다..
답변 1
1
2024. 02. 23. 20:20
안녕하세요! 우선 강의 들어주셔서 감사합니다.
우선 저희 Form 코드와 작성해주신 코드의 의미가 약간 다른데요!
이 테스트에서 저희가 검증하고 싶은 것은 아래와 같을 것 같습니다.
값을 넣고 버튼을 눌렀을 때
setCookie가 적절한 내용으로 호출이 된다.
결국 테스트 상 흐름으로는 아래와 같이 작성되어야 합니다.
폼을 렌더링 한 뒤
값을 입력하고 제출했을 때
쿠키에 제대로 세팅이 되는지
저희가 작성한 테스트 코드는 아마 외부 라이브러리를 사용하기 때문에 setCookie() 메서드가 호출 되면 제대로 저장이 되었다고 가정을 해 테스트를 작성하게 됩니다. 여기서 spy가 사용되게 됩니다.
현재 작성해주신 코드는 Form과 관련된 모든 코드를 제거해도 테스트가 성공할 것입니다. 위 테스트 코드에서 영향을 주는 부분만 남겨봤는데 작성하고자 하는 테스트 흐름과 전혀 다른 부분만 남았죠?
describe('로그인이 성공했을 경우', () => {
it('"아이디 저장" 체크박스를 체크했을 시 쿠키에 itall_admin 객체의 id key로 유저가 입력한 아이디를 저장한다.', async () => {
const setCookies = vi.fn();
setCookies.mockReturnValueOnce('center.test@itall.com');
const cookieValue = setCookies();
expect(cookieValue).toBe('center.test@itall.com');
})
})
만약 예제와 비슷한 방향으로 검증하고 싶으시다면 setCookie를 하는 react-cookie 메서드에 spy를 걸고 제대로 호출되었는지를 검증하시면 비슷한 맥락으로 검증하실 수 있을 것 입니다.
추가로 궁금하신 점 있으시면 편하게 질문 남겨주세요!
2024. 02. 26. 14:10
안녕하세요!
useCookies는 커스텀 훅이 아니라 라이브러리에서 제공해주는 훅이기 때문에 별다른 테스트를 작성할 필요가 없을 것 같습니다.
이 부분은 아직 혼란이 있으신 것 같으니 renderHook을 언제 사용할 수 있는지 다시 읽어보시는 것이 좋을 것 같습니다.
제가 해당 라이브러리를 사용해 본적이 없어 추측이지만 별개로 위와 같이 훅이 제공된다면, 모킹 없이 cookie 결과 자체를 검증하거나 검증이 불가능하다면 그때 spy 방식으로 검증하는 것이 좋아보입니다!
2024. 02. 26. 10:55
답변 감사합니다!
해당 react-cookie 라이브러리는 훅 기반 컴포넌트로 제공되고 있고 그 중 setCookie 함수를 호출하여 쿠키에 저장되게 되는데요.
그렇다면 테스트코드에서 커스텀훅을 테스트하는 방식으로 renderHook을 통해 useCookies를 모킹하는것이 맞을까요 아니면 기존 제가 했던 방식대로 setCookie 메서드에 spy 거는 방식이 맞는걸까요?