여러분, 안녕하세요!

저는 제 학생들과 멘티들로부터 영감을 받아 이 글을 쓰게 되었습니다. 나는 종종 학생들이 JavaScript 의 테스트 자동화 프로세스에 익숙해지자마자 TypeScript를 배우도록 권장합니다. REST API 테스트 측면에서 테스트 자동화 프레임워크에서 TypeScript를 사용하는 특성이 무엇인지 살펴보겠습니다.

여기에서 테스트 프로젝트의 전체 코드를 찾을 수 있습니다.

타입스크립트

TypeScript 가 무엇인지, JavaScript 와 어떻게 다른지에 대해 너무 깊이 들어가지 않고 중요한 점을 언급하지 않겠습니다. 프로그래밍 언어 야 . 그러나 매우 중요한 것도 JavaScript ( Node.js 플랫폼)에 직접적으로 의존한다는 것입니다.

TypeScript 는 Node.js 패키지로 제공되므로 저는 이것을 몇 가지 멋진 기능을 갖춘 JavaScript 로 봅니다.

언어 자체와 언어가 제공하는 기능에 대해 자세히 알아보려면 테스트 자동화 측면에서 해당 기능에 대해 이야기하는 동안 공식 웹사이트를 방문하세요.

프로젝트 설정

TypeScript 에서 테스트 자동화 프로젝트 생성 프로세스를 살펴보겠습니다.

1. Node.js 프로젝트를 만듭니다.

   npm init -y

2. TypeScript 패키지를 설치합니다.

   npm i typescript

3. 프로젝트에 대한 기본 TypeScript 구성( tsconfig.json 을 생성합니다.

   npx tsc --init

위의 명령은 기본 구성 파일을 생성하지만 다음 과 같이 파일을 많이 줄이는 것이 좋습니다.

 { "compilerOptions": { "baseUrl": "./", "module": "esnext", "target": "esnext", "sourceMap": false, "moduleResolution": "node", "allowJs": true, "skipLibCheck": true, "resolveJsonModule": true, "allowSyntheticDefaultImports": true, "paths": { "*": ["./*"] } } }

이 구성에는 필요한 최소값이 포함되어 있습니다.

• 최신 EcmaScript 버전을 사용합니다.
• JSON 가져오기를 사용할 수 있게 합니다.
• 가져오기에서 절대 경로를 사용할 수 있습니다.

공식 문서를 사용하여 구성을 확장할 수 있습니다.

도구 선택

Node.js 생태계가 제공하는 모든 도구를 사용할 수 있지만 내 경험에 따르면 TypeScript 로 작업하는 대부분의 엔지니어는 몇 가지 좋은 이유로 Jest를 선택합니다.

• 훌륭한 커뮤니티 지원(업데이트, 답변, 문서, 코드 예제),
• 유연한 구성.

이전에는 Mocha + Chai를 사용하여 프로젝트의 핵심을 설정하는 것이 재미있었지만 이제는 테스트 실행기와 어설션 라이브러리가 모두 포함되어 있는 Jest 도 사용하고 있습니다.

Axios는 가장 인기 있는 HTTP 클라이언트인 것 같으므로 이 클라이언트도 선택하실 것을 제안합니다.

설정을 위해 이것을 강제로 사용해야 한다고 말할 수는 없지만 프로젝트를 살펴보면 일반적인 일이라고 말하고 있습니다.

이제 다음 패키지를 종속성으로 설치하기만 하면 됩니다.

npm i jest axios

유형 컬렉션

Axios 와 같은 일부 패키지에는 내부에 TypeScript 유형이 포함되어 있지만 Jest 와 Mocha는 그렇지 않습니다. 또한 Jest가 제대로 작동하려면 @types/jest 와 함께 ts-jest 패키지가 필요합니다. 첫 번째 패키지는 TypeScript 기능을 활성화하고 두 번째 패키지는 IntelliSense를 사용할 수 있게 해줍니다.

따라서 명심하세요. 일부 패키지를 사용하려고 할 때 자동 완성 기능이 없으면 유형 선언이 누락되었을 수 있습니다.

TypeScript 관련 확장(패키지)도 설치해 보겠습니다.

npm i ts-jest @types/jest

구성

Jest에는 ts-jest 구성 사전 설정이 필요하므로 구성(또는 package.json ) 파일에서 이를 선언해야 합니다.

 { "jest": { "preset": "ts-jest" } }

프로젝트 내에서 절대 경로를 사용 하려는 경우 구성도 조정해야 합니다.

 { "jest": { "preset": "ts-jest", "moduleDirectories": [ "node_modules", "<rootDir>" ] } }

이 구성을 사용하면 간단한 명령으로 테스트를 실행할 수 있습니다 jest

따라서 package.json 의 테스트 스크립트를 다음과 같이 구성하세요.

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

그런 다음 npm test 또는 npm run test 명령을 사용하여 언제든지 테스트를 실행하세요.

또한 Visual Studio Code 사용자라면 Jest Runner 확장을 설치하는 것이 좋습니다. 이를 통해 단 한 번의 클릭으로 원하는 테스트/스위트를 실행 / 디버깅 할 수 있습니다. WebStorm 에는 내장된 기능입니다.

맞춤 유형

TypeScript가 REST API 테스트에 도입하는 주요 기능은 다음과 같습니다. 종류 , 물론!

요청 및 응답 본문의 모양을 선언할 수 있습니다. 즉, 키 이름 , 값 유형 등등

Paysis 서버를 예로 들어 보겠습니다. /auth 엔드포인트에 대한 요청 본문 페이로드를 유형으로 기록할 수 있습니다.

 export type AuthRequestBody = { login: string password: string }

응답 본문도 마찬가지입니다. 요청에 어떤 서버를 보내야 할까요?

 export type AuthResponseBody = { token?: string message?: string }

성공/실패 시나리오에 대해 다른 페이로드가 있으므로 " ?" 를 통해 키를 "선택 사항"으로 표시할 수 있습니다. 성격.

완료되면 이러한 유형을 사용하여 테스트에서 요청 및 확인을 작성할 수 있습니다.

요구

Axios 에서는 요청 구성을 통해 어떤 본문을 보내는지 말할 수 있습니다.

 const payload: AxiosRequestConfig<AuthRequestBody> = { method: 'post', url: '/auth', data: { login: process.env.USERNAME, password: process.env.PASSWORD, }, }

AxiosRequestConfig<AuthRequestBody> 의 AuthRequestBody 정확히 다음을 의미합니다 ☝️

이는 data 객체에 제공된 AuthRequestBody 유형과 일치하는 페이로드를 사용해야 함을 의미합니다. 필수 필드를 설정하는 것을 잊었거나 과도하게 설정한 경우 오류가 표시됩니다.

응답

응답에 대해서도 동일한 작업을 수행할 수 있습니다.

 const response: AxiosResponse<AuthResponseBody> = await client.request(payload)

response.data 개체에 자동 완성 기능이 추가되므로 response.data.token 또는 response.data.message 필드에 접근할 수 있습니다.

고급 도구

위의 간단한 내용 외에도 사용자 정의 유형에서 JSON 스키마를 생성하는 것도 가능합니다. 이를 통해 응답 본문의 모든 단일 키를 검사하여 스키마와 일치하는지 확인하는 것이 아니라 전체 페이로드를 확인할 수 있습니다 .

따라서 아이디어는 다음과 같습니다.

1. 사용자 정의 유형에서 JSON 스키마를 생성합니다.
2. 응답 본문의 유효성을 검사하려면 사용자 지정 일치자 toMatchSchema를 사용하세요.

꽤 멋진 일이지만 이러한 변경 후에는 테스트가 불안정해질 수 있다는 점을 명심하세요. 이는 일부 추가 필드가 나타날 때 발생하므로 정기적으로 스키마를 업데이트해야 합니다.

결론

TypeScript 설정은 특히 처음이라면 까다로울 수 있지만 그만한 가치가 있습니다!

입력 및 출력 데이터를 유형으로 처리하는 경우 이러한 객체를 구문 분석할 때 오타나 기타 구문 오류가 발생할 가능성이 없습니다. 간단한 실수를 방지하고 코드에서 바로 요청 구조를 볼 수 있으므로 HTTP 컬렉션 (예: Postman )을 열고 요청/응답하는 본문을 확인하는 데 필요한 요청을 찾을 필요가 없습니다. 와 함께.

당신의 경험과 그것에 대해 어떻게 생각하는지 알려주십시오.