MSW 및 Nx를 사용한 시뮬레이션

우리는 새 프로젝트 앞에 앉았고, 새로운 화면을 인코딩하기 시작해야 했지만, 백엔드가 아직 준비되지 않았다.이거 익숙하지 않아요?
어떤 시뮬레이션 메커니즘을 가지고 있는 것은 좋은 방법이다. 그러면 우리는 가능한 한 빨리 인코딩을 시작할 수 있고, 이미 알고 있는 데이터를 사용하여 단원 테스트의 오류 경향을 낮출 수 있다.
네, 그런데 너무 복잡하게 들려요.생산을 중단하지 않고 백엔드 모듈을 조심스럽게 사용하거나 비활성화해야 합니다.
이제 아니야.

도시 고체 폐기물을 소개하다

그들이 말한 바와 같이 MSW은 차세대 API에 대한 조롱이다.네, 그런데 그게 무슨 뜻이에요?그것의 작업 원리는 네트워크 수준에서 요청을 차단하거나 서비스 종사자를 사용하는 것이다.
흥미로운 것은, 그것은 우리 개발자들에게 보이지 않는다는 것이다.그거 좋지 않아요?

NX를 사용하여 프로젝트 작성

NX을 사용하는 것은 경외감을 불러일으키는 것 외에 다른 이유가 없다.여기서 볼 수 있는 모든 내용은 Angular CLI에도 적용됩니다.Angular + Nest개의 프로젝트를 포함하는 새로운 작업 영역을 만듭니다.우리가 백엔드를 시뮬레이션해야 한다는 것은 우리가 백엔드가 필요하지 않다는 것을 의미하지 않는다.결국

$ npx create-nx-workspace msw-tutorial

질문을 받았을 때 angular-nest을 선택하고 프로그램을 호출했습니다. 저는 spa을 사용했습니다.그리고 CSS과 No을 구름으로 선택하세요.
좋아하는 편집기 vscode에서 작업공간을 열고 spa과 api을 동시에 실행합니다.

$ npx nx serve

$ npx nx serve api

You need two terminal open for this.

완료되면 http://localhost:4200으로 이동하여 다음을 확인할 수 있습니다.

하단의 Message은 API에서 온 메시지입니다.만약 우리가 보고 싶다면, 우리는 apps/api/src/app/app.controller.ts을 운전할 수 있다.

도시의 고체 폐기물을 위해 환경을 창조하다

어플리케이션이 작동함에 따라 MSW을 설정합니다.
먼저 설치해 보겠습니다.

$ npm i -D msw

MSW은 설치 중인 서비스 담당자에 따라 다릅니다.

$ npx msw init apps/spa/src

mockServiceWorker.js 프로젝트에서 spa을 복제합니다.필요하면 다른 곳으로 복사할 수 있지만, 본 강좌의 목적을 위해서, 우리는 우리가 거기에 그것을 설치했다고 가정합니다.디렉토리를 패키지에 저장해야 하는 경우제이슨, 사양하지 마세요. 필요 없어요.
우리의 다음 단계는 이 mockServiceWorker.js을 등록하는 것이다.이렇게 하려면 angular.json을 열고 업데이트하십시오.

"options": {
  "outputPath": "dist/apps/spa",
  "index": "apps/spa/src/index.html",
  "main": "apps/spa/src/main.ts",
  "polyfills": "apps/spa/src/polyfills.ts",
  "tsConfig": "apps/spa/tsconfig.app.json",
  "assets": [
    "apps/spa/src/favicon.ico",
    "apps/spa/src/assets",
    "apps/spa/src/mockServiceWorker.js"
  ],
  "styles": [
    "apps/spa/src/styles.css"
  ],
  "scripts": []
},

현재 Angular는 MSW에서 이 서비스 직원을 설치할 것을 요청할 때 Angular의 로케일을 사용할 수 있습니다.
우리의 다음 질문은: 우리는 언제 조롱을 사용하고 싶습니까?물론 생산 중이 아니라, 때로는 개발 중이다.흔히 볼 수 있는 모델은 모크라는 다른 환경을 만드는 것이다.
먼저 angular.json을 다시 업데이트하여 새로운 구성을 추가합니다.

"development": {
  "buildOptimizer": false,
  "optimization": false,
  "vendorChunk": true,
  "extractLicenses": false,
  "sourceMap": true,
  "namedChunks": true
},
"mock": {
  "buildOptimizer": false,
  "optimization": false,
  "vendorChunk": true,
  "extractLicenses": false,
  "sourceMap": true,
  "namedChunks": true,
  "fileReplacements": [
    {
      "replace": "apps/spa/src/environments/environment.ts",
      "with": "apps/spa/src/environments/environment.mock.ts"
    }
  ]
}

이것은 개발된 복사본이지만 새로운 environment.mock.ts 파일을 추가했습니다.그러면 apps/spa/src/environments에 추가하겠습니다.
파일: environment.mock.ts

export const environment = {
  production: false,
};

일을 더욱 간단하게 하기 위해서, 우리는 새로운 script을 창설합니다.
파일: package.json

"scripts": {
    "ng": "nx",
    "postinstall": "node ./decorate-angular-cli.js && ngcc --properties es2015 browser module main",
    "nx": "nx",
    "start": "ng serve",
    "start-mock": "ng serve spa --configuration mock",
    "build": "ng build",

새로운 serve을 사용하여 mock 애플리케이션을 구성할 수 있도록 angular.json에 추가해야 합니다.

"development": {
  "browserTarget": "spa:build:development"
},
"mock": {
  "browserTarget": "spa:build:mock"
}

MSW 구성 작성

현재 우리의 환경이 설정되었는데, 다음 단계는 우리의 실제 시뮬레이션을 만드는 것이다. 그렇지?NX을 사용하고 있으므로 새 라이브러리를 만듭니다.

$ npx nx g @nrwl/workspace:library --name=mock-api --skipBabelrc --unitTestRunner=none

libs/mock-api/src/lib/mock-api.ts을 삭제하고
파일: handlers.ts

export const handlers = [];

파일: browser.ts

import { setupWorker } from 'msw';
import { handlers } from './handlers';

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

동시에 libs/mock-api/src/index.ts:

export * from './lib/browser';

handlers에서 우리는 모든 아날로그 네트워크 호출을 설정했고 browser.ts에서 우리는 worker 대상을 만들었다. 우리는 처리 프로그램으로 MSW을 시작할 수 있다.
우리는 어디부터 MSW을 시작해야 합니까?mock 모드에서만 실행할 예정이므로 apps/spa/src/environments/environments.mock.ts을 업데이트합니다.

import { worker } from '@msw-tutorial/mock-api';

worker.start({
  onUnhandledRequest: 'bypass',
});

export const environment = {
  production: false,
};

여기서 우리는 중요한 결정을 내렸다.우리는 우리의 모크가 처리하지 않은 요청을 어떻게 처리해야 합니까?우리 bypass 진짜 거래야.이렇게 함으로써 우리는 우리가 원하는 시뮬레이션을 선택할 수 있다.
이제 backend과 frontend을 다시 시작합니다.

$ npm run start-mock

$ npx nx serve api

다만 이번에 우리가 사용한 것은 새로운 start-mock 스크립트다.
만약 우리가 지금 다시 http://localhost:4200에서 우리의 사이트를 열면 우리는 완전히 같은 페이지를 볼 수 있을 것이다.

하지만 콘솔을 열면 다음을 볼 수 있습니다.

MSW가 활성화되어 실행 중인 것 같습니다.다만 우리는 아직 아날로그 처리 프로그램을 만들지 않았다.
계속하기 전에, 콘솔에 depends on 'debug' 파일에 대한 경고가 있음을 알 수 있습니다.이 경우 angular.json을 열고 다음과 같이 업데이트하십시오.

"options": {
  "outputPath": "dist/apps/spa",
  "index": "apps/spa/src/index.html",
  "main": "apps/spa/src/main.ts",
  "polyfills": "apps/spa/src/polyfills.ts",
  "tsConfig": "apps/spa/tsconfig.app.json",
  "assets": [
    "apps/spa/src/favicon.ico",
    "apps/spa/src/assets",
    "apps/spa/src/mockServiceWorker.js"
  ],
  "allowedCommonJsDependencies": [
    "debug"
  ],

어쨌든, 우리는 첫 번째 시뮬레이션 노선을 만들 것이다.app.component을 살펴보면 다음과 같습니다.

@Component({
  selector: 'msw-tutorial-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  hello$ = this.http.get<Message>('/api/hello');
  constructor(private http: HttpClient) {}
}

우선, 우리는 여기에 HTTP 호출이 포함된 방법이 매우 나쁘다는 것을 보았지만, 그 후에 우리는 HTTP 호출이 /api/hello이라는 것을 보았다.
프로세서를 추가합니다.
파일: handlers.ts

import { rest } from 'msw';

export const handlers = [
  rest.get('/api/hello', async (req, res, ctx) => {
    return res(ctx.json({ message: 'Msw works like a charm!' }));
  }),
];

이것은 보기에 express과 매우 비슷하다.
페이지를 다시 열면 다음이 표시됩니다.

이것은 우리의 조소이다!!
콘솔을 확인하면 다음과 같은 내용을 볼 수 있습니다.

이거 완벽해.
계속해서 개발 모드로 애플리케이션을 다시 시작합니다.

$ npx nx serve

저희가 뭘 봤죠?어느 곳에도 시뮬레이션 흔적이 없다.

결론

MSW은 응용 프로그램에 아날로그 층을 추가하는 간단한 방법이다.우리는 모의 프로그램의 모든 내용인지 부분적인 내용인지 의식적으로 결정할 수 있다.
일단 설정이 완료되면 우리는 handlers을 추가하면 시뮬레이션의 목적을 달성할 수 있고 필요에 따라 복잡한 조작을 할 수 있다.우리는 허위 데이터가 있는 json '데이터베이스' 를 사용하거나faker를 사용할 수 있습니다.
그러나 가장 좋은 부분은 전혀 보이지 않는 각도다.생산 환경에 배치하기 전에 우리는 어떤 서비스도 시뮬레이션해서 일을 할 필요가 없고, 어떤 표지도 남기지 않을 필요가 없다.
우리도 e2e에서 이런 조롱을 이용할 수 있어, 아무 일도 할 필요가 없다.e2e는 실행 중인 프로그램에 의존하기 때문에, 우리가 아날로그 설정을 사용해서 실행하기만 하면, 우리의 e2e 테스트는 이 아날로그 데이터를 사용할 것이다.
단원 테스트에 대해 우리는 모크를 사용할 수 있지만, 나는 단원 테스트가 진정한 호출을 위해 고민해서는 안 된다고 생각한다. 모크든 리얼이든.
마지막 예는 github에서 확인할 수 있습니다.