농담 유닛 테스트 TypeScript: 첫 번째 섹션

Jest를 사용하여 TypeScript 프로젝트 구성
TypeScript 프로그래밍 언어는 프로세스 초기에 오류를 포착하는 도구를 제공하여 개발자들이 강력한 유형 시스템, 추가 문법과 긴밀한 IDE 통합을 향상시킬 수 있도록 한다.Unit 테스트를 작성하여 TypeScript 코드의 분리된 부분을 검증하는 것도 표준 개발 실천의 일부분이어야 한다.이 강좌에서 우리는 새로운 TypeScript 프로젝트를 설정하고 Jest를 우리가 선택한 프레임워크로 단원 테스트를 설정하는 것에 대해 깊이 있게 토론할 것이다.
당신이 시작해야 할 것은:

Node.js 버전 17

선택 가능한 IDE(예: Visual Studio 코드)

1. 필요한 의존항이 있는 새로운 프로젝트를 시작합니다
TypeScript 프로젝트를 처음부터 만듭니다.먼저 프로젝트에 대한 디렉토리를 만듭니다.

mkdir typescript-jest
cd typescript-jest
mkdir src
mkdir test

우리는 NPM을 우리의 패키지 관리자로 사용할 것이다.노드를 설치할 때기본적으로 NPM 패키지 관리자가 포함되어 있습니다.NPM으로 프로젝트를 초기화합니다.

npm init -y

하나의 노드.js 프로젝트는 일련의 파일과 디렉터리를 생성했습니다. 이 파일과 디렉터리는Git에 포함해서 추적할 필요가 없습니다.템플릿을 작성할 수 있습니다.gitignore 파일은 프로젝트에서 노드에 사용됩니다.구체적으로 다음과 같다.

npx gitignore node

NPM 도구에는 npx 명령도 포함됩니다.이 장면에서 npx 명령을 사용하면 gitignore 명령을 실행할 수 있고 전체적으로 설치할 필요가 없습니다.
이제 TypeScript 및 Jest에 필요한 종속성을 다음과 같이 설치합니다.

npm i -D typescript jest ts-jest @types/jest

우리는 명령에서 -D 로고를 사용하여 이 가방들이 개발 의존항으로 설치되어야 한다는 것을 표시합니다.이것은 이 소프트웨어 패키지들이 개발에 필수적이라는 것을 의미한다.

2. 유형 스크립트 및 이니시에이터 코드 구성
그런 다음 TypeScript 프로젝트를 원하는 대로 초기화하고 구성해야 합니다.내장된 Typescript 컴파일러 tsc를 사용하여 프로젝트를 초기화합니다.다음과 같은 방법으로 수행할 수 있습니다.

npx tsc --init

이 명령의 출력은 다음과 같습니다.
--init 명령의 tsc 로고는 프로젝트 디렉터리에 tsconfig.json 파일을 생성합니다.
그런 다음 TypeScript 컴파일러의 동작을 구성하기 위해 tsconfig.json에 세 개의 매개변수를 추가합니다.

rootDir: 소스 코드가 있는 디렉토리

outDir: 전송된 JS 코드가 있는 디렉토리

sourceMap: 전송된 JS 파일 대신 TS 파일 참조

디버깅 용이
다음 세 가지 매개변수를 추가한 후 tsconfig.json는 다음과 같아야 합니다.

이제 TypeScript 컴파일러의 설정을 완성했습니다. TypeScript 코드를 작성합시다.src 디렉터리에 다음 내용을 포함하는 math.ts 파일을 만듭니다:

3. Jest 및 starter 테스트 구성

우리가 선택한 테스트 프레임워크는Jest입니다.Jest를 사용하는 주요 이유는 간단한 설정, 번개 같은 실행, 내장된 일치기 때문이다.이 거래를 더욱 달콤하게 하는 것은 원생 TypeScript에 대한 지원이다

기본적으로 Jest는 구성 없이 실행할 수 있습니다.그러나 TypeScript에서 테스트를 작성하려면 ts jest를 사용하여 TypeScript를 전송하는 작은 구성이 필요합니다.패키지 tsjest는 다음과 같은 기본 설정을 만들 수 있습니다:

npx ts-jest config:init

다음 단계는 가방에 Jest의 테스트 명령을 추가하는 것입니다.json 파일:

"scripts": {
    "test": "jest"
},

현재 Jest가 설정되어 있습니다. 드디어 단원 테스트를 작성할 수 있습니다!기본적으로 Jest는 test.ts로 끝나는 모든 파일을 실행합니다.test 디렉터리에 수학 함수를 위한 두 가지 간단한 테스트 용례를 만듭니다.우리는 이 테스트 파일을 math.test.ts로 명명하였는데, 그 내용은 다음과 같아야 한다:

4. 유닛 테스트 실행

우리는 이미 src/math로 수학 함수를 짰다.TypeScript를 사용하여 Jest를 설정하고 첫 번째 테스트 파일인 test/math를 만들었습니다.테스트유일하게 해야 할 일은 테스트를 실행하는 것이다.우리는 가방에 테스트 명령을 추가했다.json 파일.그리고 우리는 이렇게 테스트를 실행할 수 있다:

npm test

Jest의 출력은 다음과 같습니다:

테스트 디렉터리에서 테스트 용례를 처리하고 출력이 어떻게 변하는지 확인하십시오.테스트 파일의 예상 숫자를 변경하고 실패한 테스트의 출력을 볼 수 있습니다

Jest는 테스트 실패의 원인, 실패가 발생한 위치, 주동적으로 복구하는 방법 등 매우 명확한 오류 메시지를 제공했습니다

결론

단원 테스트가 Jest 프레임워크에서 실행되는 TypeScript 프로젝트를 설정하는 방법에 대해 설명했습니다.Jest는 TypeScript 프로젝트를 쉽게 설정하고 디버깅을 위해 가치 있는 정보를 출력할 수 있다는 사실이 증명되었다.응용 프로그램의 모든 기존과 새로운 업무 논리를 검증하기 위해 테스트를 작성하는 것은 우리의 개발 업무의 구성 부분이어야 한다

이 시리즈의 첫 부분에서 우리는 로컬에서 테스트를 어떻게 실행하는지 소개했을 뿐이다.이상적인 경우, 코드 라이브러리에서 변경 사항을 받아들일 때마다 이 프로그램을 실행하기를 원합니다.다음 기사를 계속 지켜봐 주세요

이 프로젝트의 전체 소스 코드는 GitHub에서 찾을 수 있습니다

내용이 유용하면 언제든지 지원해 주세요here: