{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/21-11-09-msw-tutorial/", "result": {"data":{"site":{"siteMetadata":{"title":"irrationnelle","author":"irrationnelle","siteUrl":"https://dev.rase.blog","comment":{"disqusShortName":"","utterances":"irrationnelle/devlog"},"sponsor":{"buyMeACoffeeId":""}}},"markdownRemark":{"id":"e1a0d843-aced-51be-b0b2-6c6f22816b49","excerpt":"수정(21.11.18): act 로 감싼 fireEvent 에 대해 예제 코드에서 를 로 감쌌는데, 는 내부에서 이미 를 호출한다고 한다. Documentation mismatch: fireEvent wrapped in act() 그래서 지금(21.11.18) 예시에 있던 호출을 모두 삭제한다. API 요청에 test double 사용하기 일반적으로 API 를 요청해서 서버로에서 값을 가져오는 경우, e2e 테스트가 아니라면 API 요청에 test double…","html":"

수정(21.11.18): act 로 감싼 fireEvent 에 대해

\n

예제 코드에서 fireEvent 를 act 로 감쌌는데,

\n

fireEvent 는 내부에서 이미 act 를 호출한다고 한다.

\n

Documentation mismatch: fireEvent wrapped in act()

\n

그래서 지금(21.11.18) 예시에 있던 act 호출을 모두 삭제한다.

\n

API 요청에 test double 사용하기

\n

일반적으로 API 를 요청해서 서버로에서 값을 가져오는 경우, e2e 테스트가 아니라면 API 요청에 test double 을 사용한다.

\n

예를 들어 영화 제목 목록을 가져오는 API 를 readMovies 라고 할 때, 다음과 같이 테스트를 한다.

\n

테스트 스펙은 movies 라는 버튼을 클릭한 경우, 영화 제목 목록이 나타나는 것이다.

\n
import * as api from '../api';\n\ntest(\"영화 목록을 받아온다.\", async () => {\n    jest.spyOn(api, 'readMovies').mockReturnValue([{title: 'Inception'}, {title: 'The Dark Knight'}]);\n    \n    render(<App />);\n\n    const button = screen.getByText(/movies/i);\n    fireEvent.click(button);\n\n    const title = await screen.findByText(/inception/i);\n    expect(title).toBeInTheDocument();\n});
\n

서버에서 직접 값을 받아오는 대신에 readMovies 요청을 test double 을 사용해서 가짜값을 전달한다.

\n

그럼 테스트 대상은 API 가 값을 전달해주었다고 생각하고 테스트 스펙대로 작동한다. 이 과정에서 테스트 코드는 테스트 대상이 값을 어떻게 다루는지 검증한다.

\n

API 응답에 대한 test double 의 한계

\n

상황에 어울리게 mocking 결과를 다르게 해주어야 하는 경우가 있을 때는 굉장히 번거롭다. 서버가 에러를 던진다거나 하는 상황이 그렇다.

\n

또 서버가 응답이 느려서 그동안 loading 화면을 보여주기로 하는 스펙이 있을 땐, 테스트가 한층 복잡해진다.

\n
import * as api from '../api';\n\ntest(\"책 목록을 받아온다.\", async () => {\n  jest.spyOn(api, \"readBooks\").mockImplementation(() => {\n    return new Promise((resolve) =>\n      setTimeout(() => {\n        resolve([{ title: \"Thus Spoke Zarathustra\" }]);\n      }, 3000)\n    );\n  });\n  render(<App />);\n\n  const button = screen.getByText(/books/i);\n  fireEvent.click(button);\n\n  const loading = await screen.findByText(/loading/i);\n  expect(loading).toBeInTheDocument();\n\n  const title = await screen.findByText(\n    /Thus Spoke Zarathustra/i,\n    {},\n    { timeout: 4000 }\n  );\n  expect(title).toBeInTheDocument();\n});
\n

이처럼 test double 이 단순히 가짜값을 전달해주는 것이 아니라 내부적으로 비동기적인 시간 지체까지 구현해주어야 한다.

\n

MSW (Mock Service Worker)

\n

서비스 워커라는 이름 때문에 상당히 어려운 개념이라고 생각하고 있었다.

\n

이벤트 루프라는 개념을 익히고 나니, 자바스크립트가 기본적으로 작동하는 메인 스레드와 다른 스레드에서 작동하는 스크립트라고 이해할 수 있었다.

\n

그래서 이 별개의 스레드에서 작동하는 스크립트가 하는 일은 바로 네트워크 요청을 중간애 가로채는 것이다.

\n

어쨌든 이름부터가 서비스 워커이고, 서비스 워커 는 브라우저에서 제공하는 API 이다.

\n

node.js 환경에서는 그래서 @mswjs/interceptors 라는 걸 사용해서 http 모듈을 monkey-patch 해서 네트워크 요청을 가로챈다.

\n

리포에 가서 코드를 잠깐 보면 window.fetch = async() => {...} 같은 코드를 볼 수 있다.

\n

MSW 사용해서 테스트 코드 작성하기

\n

handler

\n
import { rest } from \"msw\";\n\nexport const handlers = [\n  rest.get(\"http://example.com/movies\", (req, res, ctx) => {\n    return res(ctx.status(500), ctx.json({ message: \"internal error\" }));\n  }),\n  rest.get(\"http://example.com/books\", (req, res, ctx) => {\n    return res(\n      ctx.status(200),\n      ctx.json([\n        {\n          title: \"Thus Spoke Zarathustra\",\n        },\n        {\n          title: \"The Responsibility of Intellectuals\",\n        },\n      ])\n    );\n  }),\n];
\n

일부러 movies 를 요청할 때는 에러를 띄우게 했다.

\n

server

\n
import { setupServer } from \"msw/node\";\nimport { handlers } from \"./handlers\";\n\n// This configures a request mocking server with the given request handlers.\nexport const server = setupServer(...handlers);
\n

server 인 이유는 jest 를 node.js 환경에서 실행시키기 때문이다. 브라우저 환경에서 테스트한다면 서비스 워커를 등록하는 과정을 거친다.

\n

setupTests

\n
import \"@testing-library/jest-dom\";\n\nimport { server } from \"./mocks/server.js\";\n\n// 테스트 전 mock 서버 활성화\nbeforeAll(() => server.listen());\n\n// mock 핸들러가 다른 테스트에 영향을 미치지 않도록 각 테스트 종료 후 핸들러를 초기화한다.\nafterEach(() => server.resetHandlers());\n\n// 모든 테스트를 종료하면 mock 서버도 종료한다.\nafterAll(() => server.close());
\n

setupTests 파일은 보통 CRA 로 생성한 react 프로젝트에서 볼 수 있는 테스트 환경 설정 파일이다.

\n

여기서 설정하면 setupTests 의 설정에 영향을 받는 모든 테스트가 msw 의 mock 서버에도 영향을 받는다.

\n

그것이 싫다면 위 jest hook 의 메서드들의 callback 에서 호출했던 server 메서드들을 개별 테스트에서 호출하도록 한다.

\n

테스트 코드 작성

\n
import React from \"react\";\nimport { act, fireEvent, render, screen } from \"@testing-library/react\";\n\nimport { server } from \"./mocks/server\";\nimport { rest } from \"msw\";\n\nimport App from \"./App\";\n\ntest(\"딜레이 테스트\", async () => {\n  server.use(\n    rest.get(\"http://example.com/movies\", (req, res, ctx) => {\n      return res(\n        ctx.delay(3000),\n        ctx.status(200),\n        ctx.json([\n          {\n            title: \"The Dark Knight\",\n          },\n          {\n            title: \"Inception\",\n          },\n        ])\n      );\n    })\n  );\n\n  render(<App />);\n\n  const button = screen.getByText(/movies/i);\n\n  const loading = screen.queryByText(/loading/i);\n  expect(loading).not.toBeInTheDocument();\n\n  act(() => {\n    fireEvent.click(button);\n  });\n\n  const loadingAfterClick = await screen.findByText(\n    /loading/i,\n    {},\n    { timeout: 1000 }\n  );\n  expect(loadingAfterClick).toBeInTheDocument();\n\n  const titleWaitingApiResult = screen.queryByText(/inception/i);\n  expect(titleWaitingApiResult).not.toBeInTheDocument();\n\n  const title = await screen.findByText(/inception/i, {}, { timeout: 4000 });\n  expect(title).toBeInTheDocument();\n\n  const loadingAfterRequestComplete = screen.queryByText(/loading/i);\n  expect(loadingAfterRequestComplete).not.toBeInTheDocument();\n});\n\ntest(\"에러 테스트\", async () => {\n  render(<App />);\n\n  const button = screen.getByText(/movies/i);\n  act(() => {\n    fireEvent.click(button);\n  });\n\n  const error = await screen.findByText(/error/i);\n  expect(error).toBeInTheDocument();\n});\n\ntest(\"책 목록 받아오기 테스트\", async () => {\n  render(<App />);\n\n  const button = screen.getByText(/books/i);\n  fireEvent.click(button);\n\n  const loading = await screen.findByText(/loading/i);\n  expect(loading).toBeInTheDocument();\n\n  const title = await screen.findByText(\n    /Thus Spoke Zarathustra/i,\n    {},\n    { timeout: 4000 }\n  );\n  expect(title).toBeInTheDocument();\n});
\n

개별 테스트에서 server.use() 를 사용해서 setupSever 에 전달했던 handler 와는 다른 결과를 기대하는 테스트를 볼 수 있다.

\n

delay 를 3초 간 주었기 때문에 findByText 를 사용해서 비동기적으로 테스트를 검증할 수 있었다. loading 화면이 나타났다가 결과가 나오는 것을 테스트에서 확인 가능하다.

\n

참고로 이번 포스팅을 작성하면서 알게 된 것이지만 @testing-library/react 에서 제공하는 queryBy~ 함수는 비동기 함수가 아니었다.

\n

비동기적인 상황을 관리하고 싶을 땐 반드시 findBy~ 를 사용하도록 하자

\n

마치며

\n

무엇보다 편한 것은 특정 api 에서 고정된 값을 전달하도록 mocking 할 때는 단 한 번의 handler 작성으로 더 이상 mocking 할 필요가 없다는 점이다.

\n

그리고 test double 보다 개념 이해하기도 사실 굉장히 쉽다. 나는 test double 과 mock 이라는 개념을 ATDD 수업을 듣기 전까지는 왜 필요한지도 몰랐으니깐.

","frontmatter":{"title":"MSW 를 사용해서 실제 API 가 작동하는 것처럼 mocking 하기","date":"November 10, 2021"}}},"pageContext":{"slug":"/21-11-09-msw-tutorial/","previous":{"fields":{"slug":"/21-11-09-vanilla-javascript-input-and-test/"},"frontmatter":{"title":"vanilla javascript 로 키입력마다 input 이벤트 발생시키기 그리고 테스트","category":"dev","draft":false}},"next":{"fields":{"slug":"/21-11-15-single-reponsibilty-principle/"},"frontmatter":{"title":"단일 책임 원칙에 대해","category":"dev","draft":false}}}}, "staticQueryHashes": ["3128451518","3474900066"]}