테스팅 프레임워크란?

테스팅 프레임워크란 사용자가 테스트 코드를 작성할 수 있는 기반을 제공해주는 도구이다.
그렇다면, 테스팅 프레임워크를 쓰는 이유는 무엇일까?

테스팅 프레임워크를 쓰는 이유

앞서 말했듯, 테스팅 프레임워크는 테스트 코드를 작성할 수 있는 기반을 제공해준다.
이때, 테스트 코드를 작성하면서 개발자는 여러 이점을 얻을 수 있기에 테스팅 프레임워크를 사용하는 것이다.
그 이점에는 다음과 같은 것들이 있다.

• 소프트웨어가 어떻게 작동하는지를 이해할 수 있다.
• 소프트웨어를 수정할 때 예상치 못한 부작용을 방지할 수 있다.
• 소프트웨어를 유지 보수하는 데 필요한 작업을 줄일 수 있다.

물론, 테스트 코드를 작성하면서 개발 시간이 늘어나거나 테스트 코드의 유지보수 등의 문제점이 존재하지만 이점이 더 크기에 사용한다.
이 글에서는 Jest와 Playwright에 대해 알아볼 것이다.

Jest

먼저 Jest에 대해 알아보자.
Jest는 페이스북에서 만든 자바스크립트 테스팅 프레임워크이며,
프론트엔드 개발에서 가장 활발하게 사용되고 있다. 또한, Jest는 보통 Unit test를 하는데 사용된다.

시작하기

설치

npm

npm install --save-dev jest

yarn

yarn add --dev jest

초기 설정

다음과 같이 package.json 파일의 script 안에 있는 test의 값을 "jest"로 바꿔주면 된다.

{
  { ... }
  "scripts": {
    { ... }
    "test": "jest"
  }
}

이렇게 하면 드디어 Jest를 사용할 수 있다!

간단한 테스트 작성해보기

이번에는 Jest를 직접 사용해보자.

먼저, 두 개의 숫자를 더한 값을 반환하는 함수 sum 을 가진 sum.js 라는 파일을 만들어 다음과 같이 작성해 보자.

function sum(a, b) {
  return a + b;
}

module.exports = sum;

이번엔 테스트를 해보기 위한 파일은 sum.test.js 파일을 만들어 다음과 같이 작성해 보자.
참고로, .test.js 형식의 파일은 테스트용 파일이라는 의미이며, Jest가 이를 인식한다.

const sum = require("./sum");

test("1 + 2 = 3", () => {
	expect(sum(1, 2)).toBe(3);
});

그 다음 터미널에 npm test 혹은 yarn test 를 입력하면 성공적으로 테스트 결과가 나올 것이다!

 PASS  src/sum.test.js
  √ 1 + 2 = 3 (1 ms)

이렇게 Jest를 이용한 테스트 코드를 작성해 보았다!

Playwright

이번엔 Playwright에 대해 알아보자.
Playwright는 마이크로소프트에서 만든 E2E 테스트를 가능하게 해주는 테스팅 프레임워크이다.
또한, Playwright를 이용해 OS와 브라우저엔진 환경이 달라서 발생하는 크로스 브라우징 이슈를 미리 방지할 수 있다.

시작하기

설치 및 초기화

npm

npm init playwright@latest

yarn

yarn create playwright

설치를 하면 다음과 같은 디렉토리가 생성이 될 것이다. (작성자는 yarn을 사용했다. npm을 사용했다면 yarn.lock 파일 대신 package-lock.json 파일이 있을 것이다.)

테스트 해보기

이번에는 직접 테스트를 해 보자!

테스트 실행하기

테스트를 실행해 보자. 다음 명령어를 통해 테스트를 진행할 수 있다.

모든 테스트 파일 실행하기

npx playwright test

단일 테스트 파일 실행하기

npx playwright test <file-name>

테스트 결과 확인

테스트 실행 결과를 확인하려면 다음 명령어를 작성하면 된다.

npx playwright show-report

그러면 다음과 같은 테스트 결과 화면이 나올 것이다.

글을 마치며

이렇게 테스팅 프레임워크에 대해 알아보았다! 글을 적으며 테스트 코드의 중요성에 대해 잘 알수 있었다. 다음에는 기존 프로젝트에 직접 테스트를 해 봐야겠다!