Jest 설정과 기본 테스트
Jest를 설치하고 describe/it/expect 테스트를 작성하며, toBe와 toEqual 같은 매처를 사용하고, 개발 중에는 감시 모드로 테스트를 실행합니다.
Jest 설정과 기본 테스트은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
프런트엔드 코드를 테스트하는 이유
테스트는 코드를 변경할 때 회귀를 찾아냅니다. 예상되는 동작을 문서화합니다. 리팩터링할 수 있다는 자신감을 줍니다. 테스트가 없으면 변경할 때마다 다른 부분이 망가졌을지 모르는 도박을 하게 됩니다.
Jest 설치
Vite + React 프로젝트에서는 Vitest(Vite에 맞게 설계된 Jest 호환 테스트 실행기)를 사용하십시오. 다른 구성에서는 TypeScript를 위한 babel-jest 또는 ts-jest와 함께 Jest를 설치하십시오.
# Vitest (preferred for Vite projects):
npm install -D vitest
# Or Jest with TypeScript:
npm install -D jest @types/jest ts-jest테스트 파일 이름 지정
테스트 파일을 소스 파일 옆에 두십시오. Button.test.ts, utils.spec.ts와 같은 방식입니다. 또는 __tests__/ 폴더에 둘 수도 있습니다. Jest는 *.test.* 또는 *.spec.*과 일치하는 파일을 찾습니다.
describe, it, expect
describe 블록(그룹)과 it/test 함수(개별 테스트)로 테스트를 구성하십시오. expect로 결과를 단언합니다.
import { add, formatCurrency } from './utils';
describe('Math utils', () => {
it('adds two numbers', () => {
expect(add(2, 3)).toBe(5);
});
it('handles negative numbers', () => {
expect(add(-1, 1)).toBe(0);
});
});
describe('Currency formatting', () => {
it('formats USD', () => {
expect(formatCurrency(1234.5, 'USD')).toBe('$1,234.50');
});
});일반적인 매처
Jest는 다양한 매처를 제공합니다. toBe(엄격한 동등성), toEqual(깊은 동등성), toContain, toHaveLength, toBeNull, toBeTruthy, toBeFalsy, toThrow, toBeGreaterThan 등이 있습니다.
expect([1,2,3]).toHaveLength(3);
expect({ a: 1, b: 2 }).toEqual({ a: 1, b: 2 });
expect('hello world').toContain('world');
expect(() => { throw new Error('boom'); }).toThrow('boom');
expect(null).toBeNull();
expect(true).toBeTruthy();비동기 코드 테스트
프라미스를 반환하거나 테스트에서 async/await를 사용하십시오. Jest는 테스트가 완료되었다고 표시하기 전에 프라미스가 해결될 때까지 기다립니다.
it('fetches user data', async () => {
const user = await fetchUser(1);
expect(user.name).toBe('Alice');
});
// Or with resolves/rejects matchers:
it('resolves with user', () => {
return expect(fetchUser(1)).resolves.toMatchObject({ name: 'Alice' });
});beforeEach와 afterEach
테스트를 격리된 상태로 유지하려면 각 테스트 전후에 설정과 정리를 실행하십시오.
describe('User service', () => {
beforeEach(() => {
db.seed();
});
afterEach(() => {
db.clear();
});
it('creates a user', async () => {
const user = await userService.create({ name: 'Alice' });
expect(user.id).toBeDefined();
});
});테스트 실행
npm test는 모든 테스트를 실행합니다. npm test -- --watch(Jest) 또는 감시 모드의 vitest는 파일이 변경될 때 테스트를 다시 실행합니다. Vitest의 UI(vitest --ui)는 브라우저 기반 테스트 실행기를 제공합니다.
테스트 커버리지
jest --coverage(또는 vitest run --coverage)는 어떤 줄이 테스트되었는지 보여 주는 커버리지 보고서를 생성합니다. 70% 이상의 커버리지를 목표로 하는 것이 일반적인 팀 목표입니다. 커버리지가 100%라고 해서 버그가 없다는 뜻은 아닙니다.
테스트하기 쉬운 코드 작성
순수 함수(부작용이 없는 함수)는 매우 쉽게 테스트할 수 있습니다. 함수는 작고 하나의 역할에 집중하도록 유지하십시오. 의존성을 직접 가져오는 대신 주입하십시오. 그러면 테스트 대역으로 쉽게 바꿀 수 있습니다.
테스트 격리
각 테스트는 완전히 독립적이어야 합니다. 서로의 부작용에 의존하는 테스트는 취약합니다. 테스트 사이에서 변경 가능한 상태를 공유하지 마십시오. afterEach에서 모든 모의를 초기화하십시오.
빠른 확인
두 객체의 깊은 동등성을 확인하는 Jest 매처는 무엇입니까?
복습: Jest 기초
describe는 테스트를 그룹화합니다. it/test는 개별 테스트를 정의합니다. expect와 매처는 결과를 단언합니다. 원시 값에는 toBe를 사용합니다. 객체와 배열에는 toEqual을 사용합니다. 비동기 테스트는 async/await를 사용하거나 프라미스를 반환하여 작성합니다. 격리에는 beforeEach/afterEach를 사용합니다. 커버리지 보고서는 어떤 줄이 테스트되었는지 보여 줍니다. 순수 함수가 가장 테스트하기 쉽습니다.
자주 묻는 질문
“Jest 설정과 기본 테스트” 강의는 무료인가요?
네 — “Jest 설정과 기본 테스트” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“Jest 설정과 기본 테스트”에서 뭘 배우나요?
Jest를 설치하고 describe/it/expect 테스트를 작성하며, toBe와 toEqual 같은 매처를 사용하고, 개발 중에는 감시 모드로 테스트를 실행합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Frontend Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“Jest 설정과 기본 테스트” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.