기능 테스트(인터렉션 테스트)
대부분 사용자가 조작하는 기능에 대한 테스트가 된다.
- 테스트 코드의 대다수는 기능테스트라 보면된다.
대신 만약 UI를 필요로 하는 인터랙션 테스트는 어떻게 진행될까
보통 헤드리스 브라우저를 사용하여 UI 테스트 자동화를 실시한다.
헤드리스 브라우저(headless browser)
GUI가 없는 브라우저
즉, HTML 렌더링, CSS 적용, 자바스크립트 실행 등 일반 브라우저와 동일 단, 이를 GUI가 아닌 CLI로만 접근이 가능하게 한다.
왜 실제 브라우저를 사용하지 않고 헤드리스 브라우저를 사용할까?
1. 성능
UI를 렌더링할 필요가 없으므로 테스트 실행 속도가 훨씬 빠르다.
수십~수백 개의 테스트를 병렬로 돌릴 때 큰 이점이 된다.
2. 자동화 환경에서 실행 가능
CI/CD 서버나 Docker 같은 환경에서는 실제 브라우저 창을 띄울 수 없다.
헤드리스 모드는 화면 없이도 동일한 동작을 수행할 수 있어 자동화 파이프라인에서 적합하다.
3. 일관성과 안정성
사람이 직접 브라우저를 켜고 확인할 때는 OS/해상도/버전 등에 따라 결과가 달라질 수 있다.
헤드리스 브라우저는 코드로 제어되므로 항상 동일한 환경에서 테스트 가능하다.
4. 자동화 도구와의 궁합
Playwright, Puppeteer, Cypress 같은 테스트 도구들이 기본적으로 헤드리스 모드를 지원한다
덕분에 브라우저 기반의 E2E 테스트를 손쉽게 작성하고 실행할 수 있다.
핵심: 헤드리스 브라우저를 사용하면 “화면 없는 브라우저”를 CLI나 코드에서 제어할 수 있기 때문에, 자동화 과정에 우리가 명령을 주입하거나 결과를 확인하는 방식으로 개입할 수 있다!
리액트라면 JSDOM으로 테스트 할 수 있다
JSDOM이란?
Node.js 환경에서는 브라우저가 없으니까 DOM API(document, window 등)를 쓸 수 없다.
그래서 jsdom이라는 라이브러리가 브라우저의 DOM을 흉내 내주는 가짜 환경을 제공한다.
Jest 같은 테스트 러너는 기본적으로 jsdom을 내장해서, React 컴포넌트 테스트를 브라우저 없이도 실행할 수 있게 해준다.
이는 3장에 자세히 나온다고하니 그때 다시 정리해보자. 일단 jes는 가상 DOM을 흉내내주는 Mock 환경을 제공한다는 점 !!!
Jest describe
jest를 사용하면서 describe라는 함수를 자주 볼 수 있었다.
const add =(a:number,b:number)=>{
return a+b
}
describe("더하기",()=>{
test("1+1은 2",()=>{
expect.(add(1,1)).toBe(2)
})
test("2+2는 4",()=>{
expect.(add(2,2)).toBe(4)
})
})사실 add.test.ts 라는 파일이 있다면
test("1+1은 2",()=>{
expect.(add(1,1)).toBe(2)
})
test("2+2는 4",()=>{
expect.(add(2,2)).toBe(4)
})이렇게 describe 함수를 사용하지 않고 원하는 test를 작성해줘도 된다.
describe(또는 it)를 사용하는 이유는 그룹화!!
가독성을 위해서 존재한다.
test가 굉장히 많은데 이를 그룹화 해놓지 않는다면 해당 파일을 봤을 때 \
어떤 테스트에 대한 것인지 알기 어렵다. 그렇기에 그룹화를 하는 것이다.
describe로 그룹화 내부 그룹화도 가능
describe는 중첩해서 사용이 가능하다.
const add =(a:number,b:number)=>{
return a+b
}
describe("사칙연산",()=>{
describe("더하기",()=>{
test("1+1은 2",()=>{
expect.(add(1,1)).toBe(2)
})
test("2+2는 4",()=>{
expect.(add(2,2)).toBe(4)
})
})
describe("곱하기",()=>{
test("2x2는 4",()=>{
expect.(mul(2,2)).toBe(4)
})
test("2x4는 8",()=>{
expect.(mul(2,4)).toBe(8)
})
})
})
이렇게 단위 별로 좀 더 세밀한 그룹화가 가능하다!
