Next.js의 Cypress에서 테스트코드 실행해보기 (feat. MSW)

2023.10.21 - [🌳Frontend/etc] - Next.js환경에서 Cypress 시작하기 (Cypress 설치/실행)

지난 게시글에선 애플리케이션에 cypress를 설치하고 기본 설정 파일들을 알아보았습니다.

 

이상태에서 테스트코드를 작성하고 실행해도 되지만, 한가지 더 하고싶은 작업을 추가하려고 해요.

작업을 추가하기 전에, Cypress를 돌리기 위한 테스트코드를 작성해봅시다.

---

cypress 폴더에 e2e폴더를 만들고, 테스트코드를 작성할 `index.cy.js` 파일을 추가합니다.

cypress 테스트 코드는 `*.cy.js` 확장자를 따릅니다.

describe('메인페이지 테스트', () => {
  it('index 페이지 접속시, 메인페이지가 그려지는지 테스트 합니다.', function () {
    cy.visit('/')
  })
})

그리고, 정말 간단하게 테스트코드를 작성해봅시다.

위의 코드는 cypress test환경에서 index페이지에 접근하는 그저 cypress 동작을 확인하기 위한 간단한 코드입니다.

 

위의 코드를 로컬 cypress 환경에서 돌려보기 위해선 로컬 애플리케이션이 실행된 상태여야 하는데요,

cypress가 실행된 로컬 애플리케이션의 주소를 알도록,

cypress 환경설정 파일에 테스트를 실행할 애플리케이션의 로컬서버 주소를 입력해줍시다.

import { defineConfig } from 'cypress'

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
    baseUrl: 'http://localhost:3000',
  },
})

 

그리고, 애플리케이션을 실행해주고, cypress 를 실행해서, E2E Testing -> Chrome 을 클릭하면,

아까 작성한 `Index.cy.js` 테스트코드를 실행시킬 수 있습니다.

좌측엔 테스트 log가 찍히고, 우측엔 애플리케이션 화면이 노출되면서 테스트를 성공하게 됩니다 !

 

요약하자면,

1. e2e 폴더에 *.cy.js 형식의 테스트코드파일을 추가한다.
2. 애플리케이션을 실행시킨다.
3. cypress 를 실행해 테스트한다.

위의 방식과 동일하게, 테스트코드를 짜서 실행하면 됩니다. ✨

---

🤔 MSW 를 도입하려는 이유

 

만약, 테스트를 할 애플리케이션이 정적콘텐츠로 이루어진 애플리케이션이라면 크게 상관은 없지만,

외부 서버와 통신해서 가져온 데이터를 보여주는 애플리케이션이라면 문제점이 있어요.

매번 테스트를 할 때 마다 서버와 통신을 해야한다는 점이에요.

 

즉, 매번 테스트할 때 마다 API를 호출해야 한다면, API서버 입장에선 부하가 심할거에요.

또한, 프론트엔드의 e2e테스트는 화면단에서 사용자가 겪을 특정 기능을 테스트하는 것인데,

실제 API를 호출하게된다면 API 서버가 불안정하거나 데이터를 넘겨주지 않을 때 기능을 테스트한다는 의미와 맞지 않겠죠?

오로지 화면기능만 테스트할 수 있도록 실 API서버의 상황에 상관없이 프론트엔드 테스트환경을 독립적으로 만들어주는 것이 좋습니다.

 

이때 쓰이는 도구가 MSW 입니다.

---

☀️ MSW 란?

Mock Service Worker 의 줄임말로, API를 요청하기 전에, 그 요청을 가로채서 가짜 데이터(목업데이터) 를 넘겨주는 도구 입니다.

자세한 설명은 생략하고, Cypress에서 MSW를 어떻게 활용하는지 알아봅시다.

 

우선, MSW 공식사이트를 통해 MSW를 애플리케이션에 설치합시다.

자세한 과정은 [Next + TypeScript] 넥스트(리액트)에 Mock Service Worker 등록하기 게시글을 참고해주세요.

 

1. MSW 설치 링크

npm install msw --save-dev
# or
yarn add msw --dev

 

2. mock 설정 링크

루트 디렉토리에 `mocks/` 폴더를 생성합니다.

그리고 `handler.ts` ,`broswer.ts`, `server.ts` 파일을 생성합니다.

 

handler.ts

이 파일에는 요청을 가로챌 api를 추가합니다.

예시로, 저는 free pokemon api에 보내는 요청을 추가했어요.

import { rest } from 'msw'
import mockPokemons from '../cypress/fixtures/pokemons.json'

const handler = [
  rest.get('https://pokeapi.co/api/v2/pokemon', (_, res, ctx) => {
    return res(ctx.json(mockPokemons))
  }),
]

export default handler

 

공식문서 처럼 get,post 다양하게 구성이 가능합니다.

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

export const handlers = [
  // Handles a POST /login request
  rest.post('/login', null),

  // Handles a GET /user request
  rest.get('/user', null),
]

 

broswer.ts

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

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

 

server.ts

import { setupServer } from 'msw/node'
import handlers from './handlers'

export const server = setupServer(...handlers)

 

3. 브라우저에 등록

원래 2번과 3번 사이에 애플리케이션에 MSW를 등록하는 과정이 필요한데요.

이 포스팅에서 MSW를 설치하는 목적은 cypress에서 실행시키기위한 목적이므로 생략하겠습니다. 

 

npx msw init public/ --save

위의 커맨드를 입력하면 아래처럼 성공 메세지를 받게되고, 

`public` 폴더에 `mockServiceWorker.js` 파일이 자동으로 생성됩니다.

 

4. cypress 에 msw 등록

import './commands'
import { broswer } from '../../mocks/broswer'

Cypress.on('test:before:run:async', async () => {
  await broswer.start({
    serviceWorker: {
      url: 'http://localhost:3000/mockServiceWorker.js',
    },
  })
})

Cypress.on('test:after:run', async () => {
  broswer.resetHandlers()
})

등록후 cypress를 실행해보면 이전에 api를 호출했던 것이 msw가 가로채 실행함을 알 수 있습니다.

---

참고 레퍼런스

MSW를 활용하는 Front-End 통합테스트 | 카카오엔터테인먼트 FE 기술블로그

 

Add example how to use with Cypress · Issue #1560 · mswjs/msw

 

[Next + TypeScript] 넥스트(리액트)에 Mock Service Worker 등록하기