[Cypress] Cypress + MSW

Cypress에 MSW(Mock Service Worker) 를 적용하여 테스트 하는 환경 세팅 방법입니다 .

cypress/support/e2e.ts (or index.ts : cypress 버전에 따라 다름)에서 기존에 mockup api를 정의한 /src 디렉토리 내 mocking 파일을 불러와 Worker를 시작합니다.

1. e2e.ts

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

import authMocking from '@/services/mocking/auth.mocking'; // 경로문제발생!
export const mocking = setupWorker(...authMocking);
before(() => {
    // MSW 워커를 시작
    mocking.start();
});
after(() => {
    // MSW 워커를 종료
    mocking.stop();
});

e2e.ts파일이 설치된 경로는 최상위 디렉토리의 'cypress/supoort' 내부이며, 접근한 'services/mocking/auth.mocking/ts'는 src 내부 경로입니다. 물론 상대경로 (ex ../../src/  ....) 식으로 접근할 수 있지만, 불러온 파일 내부에서도 '@' Alias를 사용하기 때문에 동일한 Alias를 설정해 줄 필요가 있었습니다. 

2. cypress.config.ts

import { defineConfig } from 'cypress';
const webpack = require('@cypress/webpack-preprocessor');
const path = require('path');
export default defineConfig({
    e2e: {
        specPattern: 'cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}',
        baseUrl: 'http://localhost:4173',
        setupNodeEvents(on, config) {
            const options = webpack({
                webpackOptions: {
                    resolve: {
                        extensions: ['.ts', '.tsx', '.mjs', '.cjs'],
                        alias: {
                            '@': path.resolve(__dirname, 'src'), //src 경로를 '@'로 별칭 세팅
                        },
                    },
                },
            });
            on('file:preprocessor', options);
            return config;
        },
        supportFile: 'cypress/support/commands.ts',
    },
    component: {
        specPattern: 'src/**/__tests__/*.{cy,spec}.{js,ts,jsx,tsx}',
        devServer: {
            framework: 'vue',
            bundler: 'vite',
        },
    },
});

위와 같이 setupNodeEvent에 alias를 설정해주면 cypress 파일 내에서도 @ 키워드로 /src 디렉토리에 접근 할 수 있었습니다. 

 

3. Test

이렇게 세팅한 뒤 cypress open 으로 cypress testing tool을 실행합니다. 크롬 모드에서 DevTools를 열어 Console을 확인했을 때 [MSW] Mocking enabled. 가 확인이 되었다면 정상적으로 msw가 동작되는 것입니다. 

 

저는 로그인 버튼을 클릭 시 POST /auth 라는 api요청을 보낸 후 Main Page로 전환되는 것을 확인하는 테스트 코트를 작성 하였습니다. 

describe('Login page', () => {
    it('URL 접근 시 로그인 페이지를 확인한다.', () => {
        cy.visit('/');
        cy.dataCy('headerTitle').contains('Login');
    });

    it('로그인 버튼 클릭 시 api 요청/응답을 확인한다.', () => {
        cy.visit('/');
        cy.dataCy('loginButton').click();
        cy.dataCy('headerTitle').contains('Main');
    });
});

버튼 클릭 후 headerTitle이 'Main'으로 변경되었는지 확인합니다.

PS. cy.intercept(), cy.wait()로 api요청을 spying하고 응답 데이터 체크를 시도하였으나 현재 cypress에서 msw에 의한 api의 intercept, wait 가 동작되지 않아 dom을 체크하는 것으로 진행하였습니다.