Jest 와 Playwright

글을 시작하며

이번에 공부하게될 주제는 Jest와 Playwright 이다. 나는 jest 와 playwright를 이번 글을 작성하면서 처음 들어본다. 이번 글을 작성하면서 jest와 playwright에 대해 파악해보자!

테스팅 프레임워크을 사용하는 이유

1. 버그 감소: 테스팅 프레임워크를 사용하면 소프트웨어에서 발생할 수 있는 버그를 미리 탐지하고 수정할 수 있다.

2. 신뢰성 확보: 테스트를 통해 코드의 정확성과 안정성을 검증하고, 예외 상황과 경계 조건을 처리할 수 있는지 확인할 수 있다.

3. 코드 유지 보수성 향상: 테스트 케이스를 작성하고 실행함으로써 코드 변경에 따른 영향을 빠르게 확인할 수 있으며, 변경된 코드가 기존 기능에 영향을 주지 않는지 확인할 수 있다.

Jest

Jest는 JavaScript 프로젝트에서 테스트를 작성하고 실행하기 위한 강력한 테스팅 프레임워크다.

Jest는 Facebook에서 개발되었으며, React 애플리케이션을 테스트할때 유용하게 사용된다.

Jest 설치

npm i -D jest

package.json test 수정

 "scripts": {
    "test": "jest"
  },

test 시작하기

// fn.js
   
const fn = {
   add : (num1, num2) => num1 + num2,
}

// fn.test.js
  
const fn = require('./fn');

test('2 더하기 3은 5야', ()=>{
  expect(fn.add(2,3)).toBe(5); //Matcher 숫자나 문자등을 비교
});

test('3 더하기 3은 5야', ()=>{ // 에러 발생
  expect(fn.add(2,3)).toBe(5);
});

test('3 더하기 3은 5야', ()=>{
  expect(fn.add(2,3)).toEqual(5);
});

npm test 를 통해 test 시작

Jest Matcher

// expect(value).toBe(expected) 문자, 값 비교
    
test('두 값이 일치하는지 확인', () => {
  expect(2 + 2).toBe(4);
  expect('hello').toBe('hello');
});

// expect(value).toBeTruthy() 숫자의 크기 비교, 문자의 빈 상태 확인
    
test('값이 truthy한지 확인', () => {
  expect(4 > 2).toBeTruthy();
  expect('hello').toBeTruthy();
});

// expect(value).toEqual(expected) 객체, 배열 비교
    
test('객체 동등성 확인', () => {
  const obj1 = { name: 'John', age: 25 };
  const obj2 = { name: 'John', age: 25 };
  expect(obj1).toEqual(obj2);
});

// expect(value).toThrow(expected) 예외 상황을 테스트할 때 사용
    
test('예외 발생 확인', () => {
  function throwError() {
    throw new Error('Something went wrong');
  }
  expect(throwError).toThrow('Something went wrong');
});

Jest의 장점

1. 자동 mocking: 자동으로 mocking을 지원하여 테스트 중에 모듈, 함수, 클래스 등의 종속성을 mocking할 수 있다.
2. Snapshot 테스팅: 스냅샷은 이전에 테스트한 결과를 저장하고, 나중에 동일한 테스트를 실행할 때 저장된 스냅샷과 현재 결과를 비교하여 일치 여부를 확인한다.
3. 비동기 테스팅: Promise, async/await, 콜백 등 다양한 비동기 패턴을 처리가 가능하다.

Playwright

Playwright는 브라우저 테스트와 웹 스크래핑을 위한 강력한 오픈 소스 자동화 라이브러리다.

const { chromium } = require('playwright');

(async () => {
  // Chromium 브라우저 인스턴스 생성
  const browser = await chromium.launch();

  // 새로운 페이지 생성
  const page = await browser.newPage();

  // 페이지 이동 및 요소 클릭
  await page.goto('https://example.com');
  await page.click('a');

  // 폼 입력 및 제출
  await page.fill('input[name="username"]', 'johnDoe');
  await page.fill('input[name="password"]', 'secretpassword');
  await page.click('button[type="submit"]');

  // 스크린샷 캡처
  await page.screenshot({ path: 'example.png' });

  // 페이지 닫기 및 브라우저 종료
  await page.close();
  await browser.close();
})();

Playwright의 장점

1. 크로스 브라우저 지원: Playwright는 여러 브라우저에서 일관되게 작동하는 자동화 스크립트를 작성할 수 있다.
2. 다중 페이지 자동화: Playwright는 하나의 브라우저 인스턴스 내에서 여러 웹 페이지 또는 탭을 자동화할 수 있다.

글을 마치며

jest와 Playwright를 처음 봤을때 샤코가 생각났었다. (샤코 원챔)
jest. js(본체), jest.test.js(분신) 이라고 생각하니 이해하기 쉬웠다 ㅎㅎ..
이번 글을 작성하면서 테스팅 이라는 것을 접하게 되어 좋았고, 테스팅을 하는 이유에대해 알게되어 좋았다.