MSW(Mock Service Worker)를 이용한 모의 서버 생성

소개

Mock Service Worker 또는 MSW는 실제 요청을 가로채기 위해 Service Worker API를 사용하는 조롱 라이브러리입니다.

MSW는 두 가지 유형의 모의를 제공합니다.

Service Worker Mocks: 브라우저에서 사용하기에 이상적임

Server Mocks: nodejs 응용 프로그램에서 사용됨

이 예제에서 우리는 Nodejs 애플리케이션에 대한 서버 Mock을 사용하고 테스트 및 개발을 위해 모의 API를 설정합니다.

이 게시물의 모든 예제에 대한 참조로 이 저장소를 사용할 것입니다. 그러니 자유롭게 보고, 복제하고, 자신의 테스트를 수행하십시오: https://github.com/brunohgv/msw-test

자세한 내용은 MSW 문서를 확인할 수 있습니다. https://mswjs.io/docs/

구현

MSW 설정

설치 중

MSW를 구성하려면 먼저 설치해야 합니다.

npm install msw

그런 다음 서버를 모의하기 위한 기본 구조를 만들어야 합니다.

핸들러 만들기

이 예에서는 https://jsonplaceholder.typicode.com/ api를 참조로 사용하겠습니다.

이를 생성하려면 some handlers 을 정의하기만 하면 됩니다. 핸들러는 코드에서 요청을 찾았을 때 수행할 작업에 대한 지침입니다. 코드의 요청과 일치하고 여기에서 정의한 요청으로 대체합니다.

mocks/handlers.md

const { rest } = require('msw') // import msw
const { TODO_SUCCESS, TODO_ERROR } = require('./todoResponses') // import default responses

const handlers = [
    /*
     * How to read the handler:
     * When finding a GET request (because we are using rest.get)
     * to the "https://jsonplaceholder.typicode.com/todos"
     * replace the call by the callback function I'm passing
     */
  rest.get('https://jsonplaceholder.typicode.com/todos', async (req, res, ctx) => {
    return res(ctx.json(TODO_SUCCESS))
  })
]

module.exports = { handlers } // Export handlers

핸들러를 설정한 후 모의 서버를 만드는 것이 좋습니다.

서버 생성

서버를 생성하려면 setupServer 패키지에서 msw/node 함수를 호출하기만 하면 됩니다.

mocks/server.js

const { setupServer } = require('msw/node') // import the setupServer from the msw/node package
const { handlers } = require('./handlers') // import the handlers we created

// This configures a request mocking server with the given request handlers.
const server = setupServer(...handlers)

// Export the server
module.exports = {
    server
}

그렇게 한 후에 우리는 응용 프로그램에서 모의 ​​서버를 사용할 준비가 모두 되었습니다.

모의 서버 사용

이 응용 프로그램에서는 두 가지 다른 방법으로 사용하고 있습니다.

농담 설정에서

개발용

Jest 설정에서 사용하기

농담 설치

jest를 설치하려면 다음을 실행하면 됩니다.

npm install jest

테스트용 Jest 설정 만들기

이 구성에서 Jest를 다음과 같이 설정합니다.

테스트 전에 생성한 서버 초기화

각 테스트 후에 핸들러를 재설정하여 다른 테스트에서 부작용을 방지하기 위해

그리고 마지막에 서버를 닫겠습니다.

jest.setup.js

const { server } = require('./mocks/server.js')
// Establish API mocking before all tests.
beforeAll(() => server.listen())
// Reset any request handlers that we may add during the tests,
// so they don't affect other tests.
afterEach(() => server.resetHandlers())
// Clean up after the tests are finished.
afterAll(() => server.close())

구성을 정의한 후에는 Jest 구성에서 호출하기만 하면 됩니다.


Jest 구성 정의

설정 파일을 사용하도록 구성을 정의하려면 setupFilesAfterEnv 속성에 경로를 추가하기만 하면 됩니다.

jest.config.js

module.exports = {
    setupFilesAfterEnv: ['./jest.setup.js']
}

그런 다음 테스트를 실행할 때 원래 호출 대신 모의 서버를 사용합니다.
npm run test를 실행하여 실행 중인 테스트를 확인하고 응답이 모의와 동일한지 확인할 수 있습니다.

개발에 사용

외부 요청을 모의하기 위해 모의 서버를 시작하기 위해 jest 구성에서 사용한 것과 동일한 기능을 사용할 수 있습니다.

따라서 server.listen() 파일에 index.js를 추가하는 것만으로 간단합니다.

const express = require("express");
const { server: mockServer } = require('../mocks/server') // importing the server and renaming it to mockServer to avoid misunderstandings
const todoServer = require("./todoServer");

mockServer.listen() // This is going to do all the work to mock the resquests

const app = express()

app.get('/todos', todoServer.getTodos)

app.listen(8080, () => {
    console.log(process.env.NODE_ENV)
    console.log('server started')
})

그러나 우리는 프로덕션이나 우리가 가질 수 있는 다른 환경이 아닌 개발을 위해 추가하기를 원합니다.
따라서 이 경우 환경 변수를 사용하여 환경을 식별했습니다.

저는 이것을 package.json 파일에 설정하고 있는데 .env 파일에 있거나 터미널에서 수동으로 설정할 수 있습니다.

{
  ...
  "scripts": {
    "test": "jest",
    "start": "SET NODE_ENV=production&& node index.js",
    "dev": "SET NODE_ENV=development&& node index.js"
  },
  ...
}

추신: 저는 Windows를 사용하고 있기 때문에 명령이 SET NODE_ENV=environment 입니다. Linux 및 Mac의 경우 간단히 NODE_ENV=environment를 사용할 수 있습니다.

스크립트npm start의 경우 NODE_ENV 변수를 production로 설정합니다.

스크립트npm run dev의 경우 NODE_ENV 변수를 development로 설정합니다.

이 변수는 process.env.NODE_ENV 속성을 통해 액세스할 수 있습니다.

이제 mockServer.listen() 표현식에 if를 래핑하여 환경에 따라 모의 객체를 사용할지 여부를 정의할 수 있습니다.

const express = require("express");
const { server: mockServer } = require('../mocks/server') // importing the server and renaming it to mockServer to avoid misunderstandings
const todoServer = require("./todoServer");

// Just use the mocks if the NODE_ENV is set to 'development'
if(process.env.NODE_ENV === 'development') { 
    mockServer.listen()
}

const app = express()

app.get('/todos', todoServer.getTodos)

app.listen(8080, () => {
    console.log(process.env.NODE_ENV)
    console.log('server started')
})

그리고 그게 다야.
npm start로 실행하면 서비스를 호출하고 실제 응답을 받을 수 있습니다.
npm run dev로 실행하면 실제 호출을 모의 호출로 대체할 수 있습니다.