1. customRender 추출

type CustomRenderArgs = {
  mocks?: MockedProviderProps['mocks'];
};

const customRender = (args?: CustomRenderArgs) => {
  const { mocks = [successGetTeacherDefaultInfo] } = args || {};
  const user = userEvent.setup();

  // GYU-TODO: vitest setup 으로 추출하기
  render(<TeacherMyPage />, {
    wrapper: ({ children }) => (
      <MemoryRouterProvider>
        <MockedProvider mocks={mocks} addTypename={false}>
          <OverlayProvider>
            {children}
            <Toaster />
          </OverlayProvider>
        </MockedProvider>
      </MemoryRouterProvider>
    ),
  });

  return { user };
};

apollo mocks 데이터를 인자로 받아서 처리

• toss overlay 써서 OverlayProvider 로 감싸기
• sonnar 로 toast UI 사용해서 <Toaster /> 컴포넌트 사용

2. memory router 를 활용한 path 지정

describe('선생님 기본 정보 페이지', () => {
  beforeEach(async () => {
    **mockRouter.setCurrentUrl('/teacher-my-page');
    await mockRouter.push('/teacher-my-page');**
  });

  afterEach(cleanup);
	// ...

3. Link 테스트 할 때는 next-mock-router 를 활용하여 테스트 하기

import mockRouter from 'next-router-mock';

// ...

it('"수업료 정산하기" 를 클릭하면 정산 정보 페이지로 이동한다.', async () => {
  **expect(mockRouter.asPath).toBe('/teacher-my-page');**
  const { user } = customRender();

  const 정산하기 = screen.getByText('수업료 정산하기');
  await user.click(정산하기);
  **expect(mockRouter.asPath).toBe(MY_PAGE_LINK.TEACHER_PAYMENT);**
});

4. apollo mocking 할 때 여러 mock 을 사용하면 같이 사용

it('비활성화 상태에서 클릭하면 활성화 상태로 변경된다.', async () => {
  expect(mockRouter.asPath).toBe('/teacher-my-page');
  const { user } = customRender({
    **mocks: [
      successGetTeacherDefaultInfoMarketingDisabled, // 1
      successActiveMarketing,  // 2
      successGetTeacherDefaultInfo, // 3
    ],**
  });

  // API 데이터가 잘 올때까지 대기
  await screen.findByText('선생님');
  const checkbox = screen.getByRole('checkbox');
  expect(checkbox).not.toBeChecked();

  await user.click(checkbox);

  const successToastMessage = await screen.findByText(
    /마케팅 정보 수신이 설정되었습니다/,
  );
  expect(successToastMessage).toBeInTheDocument();
});

1. 처음에는 마케팅 비활성화된 유저 정보 mock
2. 마케팅활성화 mutation
3. 마케팅 활성화 된 유저 정보 mock

5. 커스텀 checkbox 와 같이 RTL 로 조회하기 힘든 경우, a11y 속성을 추가해서 제어

it('비활성화 상태에서 클릭하면 활성화 상태로 변경된다.', async () => {
  expect(mockRouter.asPath).toBe('/teacher-my-page');
  const { user } = customRender({
    mocks: [
      successGetTeacherDefaultInfoMarketingDisabled, // 1
      successActiveMarketing,  // 2
      successGetTeacherDefaultInfo, // 3
    ],
****  });

  // API 데이터가 잘 올때까지 대기
  await screen.findByText('선생님');
  **const checkbox = screen.getByRole('checkbox');**
  **expect(checkbox).not.toBeChecked();**

  await user.click(checkbox);

  const successToastMessage = await screen.findByText(
    /마케팅 정보 수신이 설정되었습니다/,
  );
  expect(successToastMessage).toBeInTheDocument();
});