• 카테고리

    질문 & 답변

  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

react-cookie로 쿠키값 테스트코드로 가져오는 방법

24.02.23 16:20 작성 24.02.23 16:21 수정 조회수 210

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값을 지정해서 저렇게 처리해도 되는걸까요..? 테스트는 당연히 통과되었습니다..

course-thumbnail

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

답변 1

답변을 작성해보세요.

1

코드 조커, 오프님의 프로필

코드 조커, 오프

지식공유자

2024.02.23

안녕하세요! 우선 강의 들어주셔서 감사합니다.

우선 저희 Form 코드와 작성해주신 코드의 의미가 약간 다른데요!

이 테스트에서 저희가 검증하고 싶은 것은 아래와 같을 것 같습니다.

  1. 값을 넣고 버튼을 눌렀을 때

  2. setCookie가 적절한 내용으로 호출이 된다.

결국 테스트 상 흐름으로는 아래와 같이 작성되어야 합니다.

  1. 폼을 렌더링 한 뒤

  2. 값을 입력하고 제출했을 때

  3. 쿠키에 제대로 세팅이 되는지

     

     

    저희가 작성한 테스트 코드는 아마 외부 라이브러리를 사용하기 때문에 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

답변 감사합니다!

import { useCookies } from 'react-cookie';
  
const [cookie, setCookie] = useCookies(['itall_admin']);

해당 react-cookie 라이브러리는 훅 기반 컴포넌트로 제공되고 있고 그 중 setCookie 함수를 호출하여 쿠키에 저장되게 되는데요.

그렇다면 테스트코드에서 커스텀훅을 테스트하는 방식으로 renderHook을 통해 useCookies를 모킹하는것이 맞을까요 아니면 기존 제가 했던 방식대로 setCookie 메서드에 spy 거는 방식이 맞는걸까요?

코드 조커, 오프님의 프로필

코드 조커, 오프

지식공유자

2024.02.26

안녕하세요!

useCookies는 커스텀 훅이 아니라 라이브러리에서 제공해주는 훅이기 때문에 별다른 테스트를 작성할 필요가 없을 것 같습니다.

이 부분은 아직 혼란이 있으신 것 같으니 renderHook을 언제 사용할 수 있는지 다시 읽어보시는 것이 좋을 것 같습니다.

제가 해당 라이브러리를 사용해 본적이 없어 추측이지만 별개로 위와 같이 훅이 제공된다면, 모킹 없이 cookie 결과 자체를 검증하거나 검증이 불가능하다면 그때 spy 방식으로 검증하는 것이 좋아보입니다!

이 글과 비슷한 Q&A