입력 폼이나 사용자 입력을 다루다 보면 유효성 검사가 매우 중요합니다. 타입스크립트와 Jest를 사용하여 입력 유효성 검사를 어떻게 테스트할 수 있는지 알아보겠습니다.

타입스크립트를 사용한 입력 유효성 검사

타입스크립트는 정적 타입 검사를 제공하여 런타임 전에 코드 오류를 발견해주므로 입력 폼의 유효성을 검사하는 데 매우 유용합니다. 예를 들어, 다음과 같이 입력값의 형식을 확인하는 함수를 작성할 수 있습니다.

function isValidEmail(input: string): boolean {
  const emailRegex = /\S+@\S+\.\S+/;
  return emailRegex.test(input);
}

function isValidUsername(input: string): boolean {
  const usernameRegex = /^[a-zA-Z0-9_-]{3,16}$/;
  return usernameRegex.test(input);
}

위 코드에서 isValidEmail 함수는 이메일 형식이 맞는지를, isValidUsername 함수는 유저명 형식이 맞는지를 확인합니다.

Jest를 사용한 입력 유효성 검사 테스트

Jest는 JavaScript와 TypeScript 프로젝트에서 많이 사용되는 테스팅 프레임워크 중 하나입니다. Jest를 사용하여 입력 유효성 검사 함수를 테스트할 수 있습니다. 먼저, Jest 환경을 설정하고 다음과 같이 입력 유효성을 검사하는 함수에 대한 테스트 함수를 만들어보겠습니다.

import { isValidEmail, isValidUsername } from './validationFunctions';

describe('Validation Functions', () => {
  test('Valid Email', () => {
    expect(isValidEmail('test@example.com')).toBeTruthy();
  });
  
  test('Invalid Email', () => {
    expect(isValidEmail('test@example')).toBeFalsy();
  });

  test('Valid Username', () => {
    expect(isValidUsername('user_123')).toBeTruthy();
  });

  test('Invalid Username', () => {
    expect(isValidUsername('user$%')).toBeFalsy();
  });
});

위의 테스트 코드에서는 isValidEmail과 isValidUsername 함수에 유효한 값과 유효하지 않은 값에 대한 테스트를 작성하였습니다. Jest는 각 테스트를 실행하고 예상된 결과와 실제 결과가 일치하는지를 확인합니다.

입력값의 유효성 검사는 실제 애플리케이션의 핵심 부분이며, 타입스크립트와 Jest를 통해 이를 테스트함으로써 오류를 사전에 발견할 수 있습니다.

이를 참고하여 테스트 코드 작성 및 유효성 검사를 통해 안전하고 견고한 프로그램을 만들 수 있습니다.