jest로 로그인 폼 테스트 코드 짜기

@testing-library/react 라이브러리 사용

• Enzyme 를 사용하지 않은 이유는 testing-library/react 가 실제 환경에서 돌아가는 테스트를 할 수 있어서 사용하지 않았다.
  뭔가 한글로 된 관련 질문? 블로그는 Enzyme 가 더 많은 것 같기두..
  • https://blog.logrocket.com/testing-react-components-react-testing-library-vs-enzyme/
  • https://www.daleseo.com/react-testing-library/

LoginForm.test

render(<LoginForm onSubmit={handleSubmit}>); 를 먼저 하고 screen 으로 항목들을 가져온다.

render시 onSubmit을 mocking 하고 싶을 때는 .tsx 파일에서 onSubmit을 받고 있어야 한다.

대부분 getByRole 을 사용하는 것 같은데 html 태그 이름이랑 달라서 문서 정독이 필요하다.

• screen.getByRole(’textbox’, {name: ‘email’});

💡 이것처럼..! input or textarea… = textbox

• *input type="password" 는 role로 찾을 수 없다.*

  • getByLabelText로 찾아야 한다.

• userEvent.type 으로 input의 텍스트를 바꿀 수 있지만 userEvent.click 이 왜인지 작동하지 않아서 fireEvent 로 쓰기로 했다.

  • userEvent.click 은 앞에 await 를 붙여아 한다는데 그 방법도 작동하지 않았다.;;
  • 로그인 폼은 submit을 하기 때문에 fireEvent.submit(button); 으로 작성하였다. click으로 하면 또 호출이 안된다.

• handleSubmit을 mocking 해주고, 호출됐는지 확인 할 때는 await waitFor을 사용한다.

login.test

login.tsx 파일에서 next/router와 next-auth/react를 사용하기 때문에 mocking 해줘야 한다.

next/router에서 필요한 것들은 아래와 같다.

• useRouter
  • query
  • replace

jest.mock('next/router', () => ({
  useRouter: jest.fn().mockReturnValue({
    query: jest.fn(),
    replace: jest.fn(),
  }),
}));

next-auth/react에서 필요한 것들은 아래와 같다.

• signIn

jest.mock('next-auth/react', () => ({
  signIn: jest.fn(() =>
    Promise.resolve({
      error: null,
      ok: true,
      status: 200,
      url,
    }),
  ),
}));

이렇게 위에서 mocking해주고 실제 이것을 사용할 때 다시 mocking 해줘야 한다.
(mocking을 해주는건지.. 아니면 뭘 해주는 건지 잘 모르겠지만 둘 중에 하나라도 안 해주면 제대로 된 값이 넘어오지 않는다.)

(useRouter as jest.Mock).mockReturnValue({
  query: {
    callbackUrl: url,
  },
  replace: jest.fn((callBackUrl) => callBackUrl),
});
(signIn as jest.Mock).mockImplementation(() => mockResult);

submit 버튼을 클릭 했을 때 signIn 함수에 제대로 값이 들어와야 되고, useRouter().replace 가 전달하는 url로 잘 가는지 확인해야되기 때문에 두 번의 waitFor 가 필요하다.

한 waitFor 에는 한가지만 사용 할 수 있다고 한다.

logout.test

header에 dropdown button이 있고 그 버튼을 누르면 dropdown menu가 나오고 거기에 로그아웃 버튼이 있다.

그래서 렌더링을 하고 메뉴가 나온 뒤에 로그아웃 버튼을 누를 수 있는 테스트 케이스가 필요하다.

login과 동일하게 signOut도 mocking을 해준다.

jest.mock('next-auth/react', () => ({
  signOut: jest.fn(),
}));

(signOut as jest.Mock).mockImplementation(() => url);

dropdown을 getByRole로 가져오고 클릭이벤트를 발생시키고, 로그아웃 메뉴 버튼이 나오는지 확인한다.

fireEvent.click() → screen.findByText() → fireEvent.click(logout) 순

mocking한 함수가 잘 호출되었는지 waitFor 로 확인한다.