MSW의 아름다움

우리가 MSW를 사랑하는 이유

옛날에는 새로운 프로젝트를 만들려고 할 때 백엔드에 크게 의존하지 않을 가능성을 고려했습니다. 우리의 아이디어는 백엔드의 현재 작업에 대한 모의를 수신한 다음 병렬로 진행하는 것이었습니다. 이 접근 방식을 사용하면 백엔드가 작업을 완료할 때 필요한 데이터를 준비할 수 있으므로 변경할 필요가 없습니다. 백엔드가 배포되면 개발 서버에서 모의 ​​엔드포인트를 비활성화하고 실제 엔드포인트로 전환할 수 있습니다.

모의를 생성하고 나중에 실제 엔드포인트로 대체할 수 있는 도구가 많이 있을 것이라고 확신합니다. 그러나 우리는 MSW(Mock Service Worker)라는 훌륭한 솔루션을 찾았습니다.

MSW란 무엇입니까?

MSW는 네트워크 요청을 가로채고 모의할 수 있는 강력한 도구입니다. 클라이언트 측과 서버 측 모두에서 작동하므로 놀라울 정도로 다재다능합니다. MSW를 사용하면 API 엔드포인트에 대한 현실적인 모의를 생성하여 실제 백엔드에 의존하지 않고도 애플리케이션을 개발하고 테스트할 수 있습니다.

MSW 사용의 이점

지역개발

MSW는 로컬 개발 중에 백엔드에 대한 수많은 호출을 방지하는 데 도움이 됩니다. 이렇게 하면 백엔드 서비스의 로드가 줄어들고 개발 프로세스 속도가 빨라집니다. 다음은 로컬 개발을 위해 MSW를 설정하는 방법의 예입니다.

// src/mocks/handlers.js
import { rest } from 'msw';

export const handlers =
  [
    http.get(
      URL,
      ({
        request,
      }) => {
        return HttpResponse.json(
          {
            title:
              'Mock Data',
          },
        );
      },
    ),
  ];

// src/mocks/browser.js
import { setupWorker } from 'msw';
import { handlers } from './handlers';

export const worker =
  setupWorker(
    ...handlers,
  );

// src/index.js
if (
  process.env
    .NODE_ENV ===
  'development'
) {
  const {
    worker,
  } = require('./mocks/browser');
  worker.start();
}

QA 테스트

MSW는 QA 팀이 백엔드를 실제로 호출하지 않고도 UI를 테스트할 수 있도록 도와줍니다. 이는 백엔드가 불안정하거나 개발이 많이 진행 중인 경우에 특히 유용합니다. QA 엔지니어는 사전 정의된 모의 데이터를 사용하여 프런트엔드가 예상대로 작동하는지 확인할 수 있습니다.

자동화된 테스트

자동화된 테스트를 위해 MSW는 각 통화를 수동으로 차단할 필요가 없습니다. 기본 구성을 사용하면 다양한 시나리오에 대한 응답을 모의할 수 있어 테스트를 더욱 안정적이고 쉽게 작성할 수 있습니다. 테스트 환경에서 MSW를 설정하는 예는 다음과 같습니다.

// src/mocks/server.js
import { setupServer } from 'msw/node';
import { handlers } from './handlers';

export const server =
  setupServer(
    ...handlers,
  );

// src/setupTests.js
import { server } from './mocks/server';

beforeAll(() =>
  server.listen(),
);
afterEach(() =>
  server.resetHandlers(),
);
afterAll(() =>
  server.close(),
);

핸들러를 처리하는 방법

핸들러를 별도의 파일로 그룹화하고 필요에 따라 결합하여 구성할 수 있습니다. 예:

// src/mocks/handlers.js
import { userHandlers } from './user';
import { productHandlers } from './product';

export const handlers =
  [
    ...userHandlers,
    ...productHandlers,
  ];

각 핸들러는 테스트 목적으로 여러 시나리오를 가질 수 있습니다. 다음은 시나리오를 정의하고 사용하는 방법에 대한 예입니다.

핸들러의 시나리오

시나리오는 성공 또는 오류 상태와 같은 다양한 조건을 시뮬레이션하는 사전 정의된 응답 세트입니다. 이를 통해 다양한 모의 응답 간에 쉽게 전환할 수 있습니다.

// src/mocks/user.js
import { rest } from 'msw';

const USER_URL =
  'http://pii.dev.localhost:3200/api/v1/userV2/current';

const scenarios = {
  success: [
    http.get(
      URL,
      ({
        request,
      }) => {
        return HttpResponse.json(
          {
            title:
              'Mock Data',
          },
        );
      },
    ),
  ],
  error: [
    http.get(
      USER_URL,
      () => {
        return HttpResponse.json(
          {
            error:
              'Unauthorized',
          },
          {
            status: 401,
          },
        );
      },
    ),
  ],
};

const scenarioName =
  new URLSearchParams(
    window.location.search,
  ).get(
    'scenario',
  ) || 'success';
export const userHandlers =
  scenarios[
    scenarioName
  ] || [];

시나리오 설명

시나리오를 사용하면 애플리케이션에서 발생할 수 있는 다양한 조건을 쉽게 테스트할 수 있습니다. URL의 시나리오 쿼리 매개변수를 변경하면 코드 변경 없이 다양한 응답을 시뮬레이션할 수 있습니다.

예를 들어 성공 시나리오를 테스트하려면 다음으로 이동하세요.

http://yourapp.localhost/?scenario=success

오류 시나리오의 경우:

http://yourapp.localhost/?scenario=error

이 접근 방식을 사용하면 다양한 모의 응답 간에 동적으로 전환하여 개발 및 테스트 프로세스를 더욱 유연하고 효율적으로 만들 수 있습니다.

---

MSW를 사용하면 개발 환경과 테스트 환경 모두에서 모의 ​​데이터와 API 응답을 원활하게 처리할 수 있습니다. 이를 통해 백엔드의 가용성이나 안정성에 대해 걱정하지 않고 기능 개발과 테스트 작성에 집중할 수 있습니다. MSW를 사용하면 실제 백엔드와 통합하기 전에 자신있게 현실적인 모의 시나리오를 만들고 애플리케이션이 올바르게 작동하는지 확인할 수 있습니다.

저는 아직도 MSW가 어떻게 작동하는지 알아가는 중입니다. 더 좋은 해결책이 있다면 언제든지 알려주세요.

모범 사례를 확인하고 싶다면 문서를 확인하세요.

위 내용은 MSW의 아름다움의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!