[테스트 도입 - 레거시 프로젝트] 2-1. FE Unit Test

회사 프로젝트에서는 기존 레거시 프로젝트에 webpack, babel을 적용한 환경으로 vue나 react같은 프레임워크를 사용하지 않고 jsp를 사용하고 있다.
unit test와 integration test, e2e test 모두를 도입하려고 했지만 코드상 unit test와 e2e test만을 진행하기로 결정했다.
unit test는 공통으로 쓰이는 함수들을 체크하기 위해 사용하고, e2e 테스트는 의도한 대로 코드가 잘 동작하는지 확인하기 위해 진행한다.

Unit Test?

단위테스트란 최소 단위의 함수, 컴포넌트 등을 테스트한다.

Unit Test vs. E2E Test

Unit Test

• 주어진 함수, 클래스 또는 컴포저블에 제공된 입력 정보가 의도하는 출력 또는 side-effect를 생성하는지 확인
• 테스트가 빠르게 실행됨
• 정확한 문제 식별 가능
• 그러나, 단위 테스트를 통과했음에도 불구하고 전체 어플리케이션이 여전히 작동하지 않을 수 있음
• Tool: Jest

E2E Test

• 여러 페이지에 걸쳐 있는 기능을 확인하고, 프로덕션으로 빌드되는 Vue 앱처럼 실제 네트워크 요청
• 한 번에 많은 항목 테스트 가능
• 실행 속도가 느림 (최대 1시간 이상 걸릴 수 있음)
• 실패 원인을 정확히 찾아낼 수 없음
• 외부 서비스나 API에 의존하는 E2E 테스트는 어플리케이션 자체에는 문제가 없지만 서비스가 중단되어 실패할 수 있음
• Tool: Cypress, Nightwatch

Unit Test Tools

javascript 테스트 중 인기 있는 라이브러리는 Jest와 Jasmine이다.

Jest 사용

library 설치

npm install -D jest
npm install -D jest-environment-jsdom
npm install -D eslint-plugin-jest

package.json

script: {
  'test': 'jest'
}

😢 오류 해결

import 오류

Jest encountered an unexpected token 오류 발생

import 자체를 읽지 못하는 이슈로, babel-jest로 javascript code transformation 필요. babel-jest 설치 및 설정이 필요하다.

해결방법

1. babel-jest 설치

npm install -D babel-jest

2. jest.config.js 옵션 추가

const config = {
  transform: {
    '\\.js$': '<rootDir>/node_modules/babel-jest',
  },
}

module import 오류

Cannot find module '@/common' from '__test__/common.test.js' 오류 발생

import { isNullString } from '@/common'; 라인에서 발생하는 오류로, @ alias 선언이 안돼있어 module import 시 파일 경로를 찾지 못해 발생하는 오류

해결방법

1. jest.config.js 옵션 추가

const config = {
  moduleNameMapper: {
    '\\.(css|less|scss)$': '<rootDir>/<파일 경로>/styleMock.js',
  }
}

Library 내부 css 오류

SyntaxError: Unexpected token . 오류 발생

import './stype.css'; 라인에서 발생하는 오류로, 사용하고 있는 library 내부에서 css를 import해서 사용하고 있을 때 발생하는 오류

해결방법

1. styleMock.js 파일 생성

export default {};

2. jest.config.js 옵션 추가

const config = {
  moduleNameMapper: {
    '\\.(css|less|scss)$': '<rootDir>/<파일 경로>/styleMock.js',
  }
}

jquery-ui jQuery 선언 오류

jquery-ui library 사용중 ReferenceError: jQuery is not defined 오류 발생

jquery-ui node_modules/dist/jquery-ui.js 내부 jQuery 선언이 돼있지 않아 발생하는 오류로, jest 실행 전 환경설정 파일 읽어들일 수 있도록 수정

해결방법

1. test-env.js 파일 생성

import $ from 'jquery';
global.$ = global.jQuery = $;

2. jest.config.js 옵션 추가

const config = {
  setupFiles: ['<rootDir>/<파일 경로>/test-env.js'],
}