NextJS에서 MSW를 활용한 Playwright 서버 사이드 모킹 전략

2024-11-01 22:27:20

mswplaywrightmockingnextjs

NextJS와 Playwright, MSW로 서버 사이드 모킹하기

NextJS 애플리케이션을 테스트할 때, 외부 API가 불안정한 경우 테스트가 실패할 수 있습니다. 특히 Playwright를 사용한 테스트에서 이러한 문제가 발생한다면, CI/CD 파이프라인이 중단될 수 있어 큰 골칫거리가 됩니다. 이런 문제를 해결하기 위해 Mock Service Worker(MSW)를 이용하여 서버 사이드 요청을 모킹하는 방법을 소개하겠습니다.

Playwright 설정하기

먼저 Playwright를 설치하고 package.json에 스크립트를 설정합니다. Playwright는 테스트를 실행하기 위해 애플리케이션의 서버를 시작해야 하므로, 웹 서버 설정이 필요합니다.

// playwright.config.ts
module.exports = {
  webServer: {
    command: 'npm run start',
    url: 'http://localhost:3000',
    timeout: 120 * 1000,
  }
};

Playwright 테스트 파일을 작성하고 API가 기대하는 데이터를 반환하도록 모킹합니다.

// tests/index.spec.ts
import { expect, test } from "@playwright/test";

test("Bulbasaur", async ({ page }) => {
  await page.goto('http://localhost:3000/');
  const name = await page.innerText('h1');
  expect(name).toBe('bulbasaur');
});

테스트를 실행해 보시면 실시간 데이터를 사용하기 때문에 외부 API가 변경되면 실패할 수 있습니다.

Mock Service Worker로 모킹 환경 설정하기

Mock Service Worker를 사용하여 플레이윗용 모킹을 수행할 수 있도록 초기 설정을 해보겠습니다. MSW를 설치하고, 테스트에 필요한 속성을 설정합니다.

// tests/fixture.ts
import { Page, test as base } from "@playwright/test";
import { setupServer, SetupServerApi } from "msw/node";

export const test = base.extend<{ dynamicPage: Page, requestInterceptor: SetupServerApi }>({
  dynamicPage: async ({ page }, use) => {
    const requestInterceptor = setupServer();
    requestInterceptor.listen({
      onUnhandledRequest: "bypass"
    });

    await use(requestInterceptor);
  }
});

위 코드는 MSW 서버를 준비하고 비동기 방식으로 지정된 API 요청을 모킹하는 구조입니다.

서버 사이드 호출 모킹하기

API 요청을 모킹 처리하여 테스트 결과에 영향을 주지 않도록 합니다. 예를 들어, "bulbasaur" 대신 "squirtle"를 반환하는 예제를 통해 모킹이 제대로 동작하는지 확인할 수 있습니다.

// tests/index.spec.ts
import { test } from './fixture';
import { http, HttpResponse } from "msw";

test("Bulbasaur", async ({ dynamicPage }) => {
  requestInterceptor.use(http.get('https://pokeapi.co/api/v2/pokemon/bulbasaur', () => {
    return HttpResponse.json({name: 'squirtle'});
  }));

  await dynamicPage.goto('http://localhost:3000/');
  const name = await dynamicPage.innerText('h1');
  expect(name).toBe('squirtle');
});

MSW와 Playwright를 사용하여 API 응답을 모킹함으로써, 외부 API 상태와 관계없이 일관된 테스트 결과를 얻을 수 있습니다.

결론

이번 글에서는 NextJS 15와 App Router를 이용하여 Playwright와 MSW로 서버 사이드 요청을 모킹하는 방법을 알아보았습니다. 위 방식대로 설정하면 API 불안정성으로 인한 테스트 실패를 방지하고, 배포 파이프라인을 안전하게 유지할 수 있습니다. 테스트 환경에서 외부 데이터 변화에 영향을 받지 않도록 하는 것은 대규모 애플리케이션에서 특히 중요합니다. 이 방법을 활용하면 효과적으로 서버 사이드 테스트를 강화할 수 있을 것입니다.

참고 가능한 추가 리소스: