웹 프론트엔드 testing 종류

Test 종류

---

1. 정적 테스트

코드를 실행시키지 않고 코드의 문제점을 찾는 것

type 에러나 reference에러 처럼 개발자의 실수로 발생할 수 있는 에러를 예방할 수 있음

일반적으로 Estlint를 활용

2. 단위 테스트

모듈을 독립적으로 테스트하는것

프론트엔드에서는 특정 컴포넌트의 렌더링을 확인함

3. 통합 테스트

두 개 이상의 모듈을 연결해 테스트 하는것

프론트엔드에서는 UI와 API의 상호작용이 제대로 일어나는지, 상태에 따라 UI가 잘 변경되는지를 확인함

4. E2E Test (end to end)

사용자 입장 및 환경에서 시뮬레이션 하는 테스트

실제 브라우저를 실행해서 테스트 해서 실제 상황에서 발생할 수 있는 에러를 검출할 수 있음

브라우저를 띄워서 테스트하기 때문에 속도가 느리고 테스트 실행 환경 (네트워크 등)에 영향을 받기 때문에 신뢰하기 어려울 수도 있음

FE Testing 관심사

---

시각적 요소, 사용자 이벤트 처리, API 서버 통신

Testing tool

---

1. Storybook

UI 개발 환경. UI 컴포넌트를 독립적으로 개발하고 확인할 수 있다.

컴포넌트를 시각적으로 확인할 수 있고 상태에 따른 렌더링도 확인할 수 있다.

스토리북 링크

2. Testcafe

크로스 브라우징을 테스트하는데 특화된 E2E testing tool.

크롬, 익스플로러, 엣지, 사파리 모두 지원.

브라우저 환경에서 테스트를 진행해 Web-API에 접근할 수 있음

web-API : console api, canvas api, webrtc 등등

참고 : 첫 인상이 좋은 E2E 테스트 프레임워크, TestCafe

3. Jest

프론트엔드 뿐만 아니라 백엔드에서도 사용할 수 있는 Node.js 용 testing tool.

test 환경에 필요한 다양한 API 지원

snapshot testing(기능의 예상 결과를 미리 정해두고 테스트 결과와 비교하는 테스트 기법)

code coverage(테스트 코드가 프라덕션 코드를 얼마나 실행했는지, 테스트 코드가 충분한지 지표)

//sum.js
function sum(a, b) {
  return a + b;
}
module.exports = sum;

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

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});