2. Test 도구 설정과 사용

사용할 테스트 도구

• Jest

• MSW

• Playwright

• CodeceptJS

Jest

자바스크립트 테스트 프레임워크 중의 하나이다.

Jest 설치

npm i -D jest @types/jest @swc/core @swc/jest \
    jest-environment-jsdom \
    @testing-library/react @testing-library/jest-dom@5.16.4

jest.config.js

module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
  transform: {
    '^.+\\.(t|j)sx?$': [
      '@swc/jest',
      {
        jsc: {
          parser: {
            syntax: 'typescript',
            jsx: true,
            decorators: true,
          },
          transform: {
            react: {
              runtime: 'automatic',
            },
          },
        },
      },
    ],
  },
};

MSW(Mock Service Worker)

네트워크 레벨에서 mock 을 구현하하여, 오프라인 작업 등을 지원하기 위한 서비스 워커의 기능이 유용한 API 모의 라이브러리이다.

MSW 설치

# 2024.03.06 시점에는 version 2
npm i -D msw@0.36.4

jest.config.js 파일의 “setupFilesAfterEnv” 속성에 setupTests.ts 파일 추가

module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: [
    '@testing-library/jest-dom/extend-expect',
    '<rootDir>/src/setupTests.ts',
  ],
  transform: {
    ...
  },
};

src/setupTests.ts 파일

src/mocks/server.ts 파일

src/mocks/handlers.ts 파일

version 2에서의 설정과 사용법은 추후 업데이트

Playwright

Playwright 설치

npm i -D @playwright/test eslint-plugin-playwright

playwright.config.ts 파일

import { PlaywrightTestConfig } from '@playwright/test';

const config: PlaywrightTestConfig = {
  testDir: './tests',
  retries: 0,
  use: {
    baseURL: 'http://localhost:8080',
    headless: !!process.env.CI,
    screenshot: 'only-on-failure',
  },
};

export default config;

tests/.eslintrc.js 파일

module.exports = {
  env: {
    jest: false,
  },
  extends: ['plugin:playwright/playwright-test'],
  rules: {
    'import/no-extraneous-dependencies': 'off',
  },
};

tests/home.spec.ts

import { test, expect } from '@playwright/test';

test('Filter products', async ({ page }) => {
  await page.goto('/');
  await expect(page.getByText('Apple')).toBeVisible();
  ...

});

playwright 실행

npx playwright test

에러가 발생했을 때 /test-results/ 폴더 및 파일이 생성되니 .gitignore 에 추가 할 것