1. private route 만들기

쉬는 날(5/5)이라 큰 기능을 개발하기 보다, 자잘자잘하게 빠진 기능들을 나누고, 그 중 하나를 선택해서 개발했다.

Private Router라고, 권한이 없는 경우에 올바른 경로로 redirect 하도록 하는 기능이다.

보통 2가지 기능이 필요하다.

• 로그인 되지 않은 유저가 접근할 수 없는 경로

  • 개인 정보를 다루는 경로 (프로필 등등...)

• 로그인된 유저가 접근할 수 없는 경로

  • 로그인 / 회원가입 페이지

---

두 번째 상황에서 동작하는 코드를 보자.

export const OnlyPublicRoute = (Component: NextPage) => {
  const PublicRoute = () => {
    const router = useRouter();
    const user = useRecoilValue(userState);

    if (user) {
      router.push("/");
      return null;
    }

    return <Component />;
  };

  return PublicRoute;
};

// use example
OnlyPublicRoute(Login)

recoil의 user값이 들어있는 경우에는, "/" 경로로 이동하는 코드이다.

2. 테스트 추가하기

로그인 된 상태와 그렇지 않은 상태로 /login에 접근하는 것을 매번 할 수 없으니, 테스트를 통해 자동화 해보자. (사실 인간이 하는 것도 자동화... Human Automation...)

jest.mock("next/router", () => ({
  useRouter: jest.fn(),
}));

jest.mock("@tanstack/react-query", () => ({
  useMutation: () => ({
    mutate: jest.fn(),
  }),
  QueryClientProvider: jest.fn(),
}));

describe("로그인 페이지 접근 가능 여부를 테스트 합니다.", () => {
  it("로그인 되지 않은 경우, 접근 가능합니다.", () => {
    render(
      <RecoilRoot initializeState={({ set }) => set(userState, null)}>
        <Login />
      </RecoilRoot>,
    );
  });

  it("로그인 된 경우, 접근이 불가능합니다.", () => {
    const pushMock = jest.fn();
    (useRouter as jest.Mock).mockReturnValue({
      push: pushMock,
    });

    render(
      <RecoilRoot
        initializeState={({ set }) =>
          set(userState, { email: "test@test.com", id: 1 })
        }
      >
        <Login />
      </RecoilRoot>,
    );

    expect(useRouter().push).toBeCalledWith("/");
  });
});

여기서 새로 알게 된 or 궁금한 점은 2가지

• 외부에서 recoil state 주입하는 법 (해결)
  • 위에서도 볼 수 있듯이initializeState 로 초기 recoil state를 설정해줄 수 있다.
• jest.mock을 하면 어떤 일이 생기는가

2-1 급발진

갑자기 jest.mock을 하면 어떻게 되는지 너무 궁금해졌다. 근데 코드를 아무리 뒤져봐도 jest.mock 에 해당하는 내용은 없더라.(내가 못 찾는 거겠지...)

급하게 글을 마칩니다.