[typescript] 타입스크립트와 Jest를 활용하여 폼 유효성 검사를 테스트하는 방법

11 Dec 2023

typescript

폼 유효성 검사는 웹 애플리케이션에서 중요한 부분 중 하나입니다. 사용자의 입력이 유효한지를 확인하여 데이터를 정확히 처리할 수 있도록 도와줍니다. 타입스크립트와 Jest를 활용하여 폼 유효성 검사를 테스트하는 방법에 대해 알아보겠습니다.

1. Jest 설치

Jest는 JavaScript 테스트 프레임워크로, 타입스크립트 프로젝트에서도 손쉽게 사용할 수 있습니다. 먼저 프로젝트에 Jest를 설치합니다.

npm install --save-dev jest @types/jest ts-jest

2. 폼 유효성 검사 함수 작성

타입스크립트로 폼 유효성 검사 함수를 작성합니다.

// formValidator.ts

type ValidationResult = {
  valid: boolean;
  errors?: string[];
};

const validateForm = (input: string): ValidationResult => {
  if (input.trim() === '') {
    return { valid: false, errors: ['Input cannot be empty'] };
  }
  return { valid: true };
};

export default validateForm;

3. 테스트 케이스 작성

Jest를 사용하여 폼 유효성 검사 함수에 대한 테스트 케이스를 작성합니다.

// formValidator.test.ts

import validateForm from './formValidator';

test('empty input should be invalid', () => {
  const result = validateForm('');
  expect(result.valid).toBe(false);
  expect(result.errors).toContain('Input cannot be empty');
});

test('non-empty input should be valid', () => {
  const result = validateForm('hello');
  expect(result.valid).toBe(true);
});

4. 테스트 실행

작성한 테스트를 실행하여 폼 유효성 검사 함수가 올바르게 동작하는지 확인합니다.

npx jest

위 명령어를 실행하면 Jest가 테스트를 실행하고 결과를 표시해줍니다.

이제 타입스크립트와 Jest를 활용하여 폼 유효성 검사를 테스트하는 방법에 대해 알아보았습니다. 안정적이고 신뢰할 수 있는 애플리케이션을 개발하기 위해, 테스트 작성을 꼭 염두에 두시기 바랍니다.

더 많은 정보를 원하시면 Jest 공식 문서를 참고하시기 바랍니다.