프론트엔드 테스팅 전략 및 구현

안녕하세요! 새콤하고달콤입니다.

오늘은 프론트엔드 테스팅 전략 및 구현에 대한 이야기를 해보려고 합니다.

 

테스트 코드 : 애플리케이션이 요구 사항에 맞게 동작하는지를 검증하는 행위

 

자동화 테스트의 중요성 : 대부분의 테스트가 반복적인 행위, 위의 간단한 예제에서도 "해당 항목을 클릭" 하고 결과를 "확인" 하는 과정이 계속해서 반복되는 것을 볼 수 있습니다. 이런 반복된 작업을 수동으로 진행하게 되면 애플리케이션의 복잡도가 증가할수록 테스트 비용만 증가하게 됩니다. 

 

좋은 테스트가 뭔지 알아야 합니다. 

 

1. 실행 속도가 빨라야 합니다.

 

2. 내부 구현 변경 시 깨지지 않아야 합니다.

 

3. 버그를 검출할 수 있어야 합니다.

 

4. 테스트의 결과가 안정적이어야 합니다.

 

5. 의도가 명확하게 들어나야 합니다. 

 

일단 해보자는 생각으로 현재 진행중인 프로젝트에서 도입을 하였습니다.

jest를 이용해서 구현하였습니다. 

 

div 태그를 생성한 후에 

header에 rendering 시킨 후 innerHTML의 스냅샷과 비교합니다.

기존의 스냅샷이 존재하는 경우, 같은지 아닌지 비교하고 같으면 통과 아니면 실패하게 됩니다. 

 

import React from 'react';
import { render } from 'react-dom';
import Header from '../components/header';

it('Header Component - snapshot', () => {
	const el = document.createElement('div');
	render(<Header />, el);
	expect(el.innerHTML).toMatchSnapshot();
});

- jest.config.js 파일을 통해서 test에 match할 수 있도록 파일 형식을 지정해주었습니다.

- ts, tsx를 테스트할 수 있도록 transform 설정을 진행하였습니다.

- svg나 png 파일 또한 사용할 수 있도록 moduleNameMapper 속성을 지정하였습니다. 

module.exports = {
	roots: ['<rootDir>/src'],
	testMatch: [
		'**/__tests__/**/*.+(ts|tsx|js)',
		'**/?(*.)+(spec|test).+(ts|tsx|js)',
	],
	transform: {
		'^.+\\.(ts|tsx)$': 'ts-jest',
	},
	collectCoverageFrom: ['src/**/*.{js,jsx}'],
	moduleNameMapper: {
		'^.+\\.(svg|png|ico)$': 'ts-jest',
	},
};