playwright 테스트 전 필요한 것들 setup하기 (feat. beforeMount 사용)

에러 발생

react-router-dom를 사용하는 코드의 playwright 테스트 중 아래와 같이 useNavigate 관련 에러가 발생했습니다.

 

단순 해결

useNavigate는 react-router-dom 의 훅으로 서칭해보니 MemoryRouter 로 감싸주면 된다고 합니다.

  const component = await mount<HooksConfig>(
    <MemoryRouter initialEntries={['/']}>
      <Component />
    </MemoryRouter>,
    { hooksConfig }
  );

 

이렇게 mount 시에 단순히 감싸는 식으로 해결할 수도 있겠지만, 이 부분을 공통화 할 수 있습니다.

 

공통화 시도 1

import { MemoryRouter } from 'react-router-dom';
import { AuthContext } from '@contexts';

export const TEST_CT_USER_ID = 1;

export const testCtRender = (
  children: React.ReactElement,
  initialPath?: string
): React.ReactElement => {
  return (
    <MemoryRouter initialEntries={[initialPath ?? '/']}>
      <AuthContext.Provider
        value={{
          user: {
            id: TEST_CT_USER_ID,
          },
          isLoading: false,
          isError: false,
          logout: () => {},
        }}
      >
        {children}
      </AuthContext.Provider>
    </MemoryRouter>
  );
};

// 사용처
const component = await mount<HooksConfig>(
    testCtRender(<Component />, '/some-path'),
    { hooksConfig }
);

 

우선 단순히 render 해주는 함수를 별도로 구성하여 공통화할 수 있습니다.

testCtRender 함수는 MemoryRouter 로 현재 path 를 세팅하고, 필요한 Context 를 제공해주는 역할을 합니다.

 

공통화 시도 2

import { beforeMount as beforeMount17 } from '@playwright/experimental-ct-react17/hooks';
import { beforeMount as beforeMount18 } from '@playwright/experimental-ct-react/hooks';

interface HooksConfig {
  initialPath?: string;
}

function customBeforeMount(originalSetupApp: SetupAppCallback): void {
  beforeMount<HooksConfig>(async ({ App, hooksConfig }) => {
    const { initialPath } = hooksConfig;
    return (
        <MemoryRouter initialEntries={[initialPath ?? '/']}>
          <AuthContext.Provider
            value={{
              user: {
                id: TEST_CT_USER_ID,
              },
              isLoading: false,
              isError: false,
              logout: () => {},
            }}
          >
            <App />
          </AuthContext.Provider>
        </MemoryRouter>
    );
  });
}

// playwright/index.tsx 에서 실행
customBeforeMount();

playwright 의 beforeMount 기능을 이용하면 공통함수를 정의하지 않고도 모든 테스트 코드에 똑같은 코드를 적용할 수 있습니다.

참고 : https://playwright.dev/docs/test-components