여러분, 안녕하세요! 저는 제 학생들과 멘티들로부터 영감을 받아 이 글을 쓰게 되었습니다. 나는 종종 학생들이 의 테스트 자동화 프로세스에 익숙해지자마자 배우도록 권장합니다. REST API 테스트 측면에서 테스트 자동화 프레임워크에서 TypeScript를 사용하는 특성이 무엇인지 살펴보겠습니다. JavaScript TypeScript를 테스트 프로젝트의 전체 코드를 찾을 수 있습니다. 여기에서 타입스크립트 가 무엇인지, 와 어떻게 다른지에 대해 너무 깊이 들어가지 않고 중요한 점을 언급하지 않겠습니다. . 그러나 매우 중요한 것도 ( 플랫폼)에 직접적으로 의존한다는 것입니다. TypeScript JavaScript 프로그래밍 야 언어 JavaScript Node.js 는 패키지로 제공되므로 저는 이것을 몇 가지 멋진 기능을 갖춘 로 봅니다. TypeScript Node.js JavaScript 언어 자체와 언어가 제공하는 기능에 대해 자세히 알아보려면 테스트 자동화 측면에서 해당 기능에 대해 이야기하는 동안 방문하세요. 공식 웹사이트를 프로젝트 설정 에서 테스트 자동화 프로젝트 생성 프로세스를 살펴보겠습니다. TypeScript 프로젝트를 만듭니다. Node.js npm init -y 패키지를 설치합니다. TypeScript npm i typescript 프로젝트에 대한 기본 구성( 을 생성합니다. 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 가장 인기 있는 HTTP 클라이언트인 것 같으므로 이 클라이언트도 선택하실 것을 제안합니다. Axios는 설정을 위해 이것을 강제로 사용해야 한다고 말할 수는 없지만 프로젝트를 살펴보면 일반적인 일이라고 말하고 있습니다. 이제 다음 패키지를 종속성으로 설치하기만 하면 됩니다. 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 맞춤 유형 REST API 테스트에 도입하는 주요 기능은 다음과 같습니다. , 물론! TypeScript가 종류 요청 및 응답 본문의 모양을 선언할 수 있습니다. 즉, , 등등 키 이름 값 유형 서버를 예로 들어 보겠습니다. 엔드포인트에 대한 요청 본문 페이로드를 유형으로 기록할 수 있습니다. 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 스키마를 생성하는 전체 페이로드를 확인할 수 있습니다 따라서 아이디어는 다음과 같습니다. 사용자 정의 유형에서 생성합니다. JSON 스키마를 응답 본문의 유효성을 검사하려면 사용자 지정 일치자 사용하세요. toMatchSchema를 꽤 멋진 일이지만 이러한 변경 후에는 테스트가 불안정해질 수 있다는 점을 명심하세요. 이는 일부 추가 필드가 나타날 때 발생하므로 정기적으로 스키마를 업데이트해야 합니다. 결론 설정은 특히 처음이라면 까다로울 수 있지만 그만한 가치가 있습니다! TypeScript 입력 및 출력 데이터를 유형으로 처리하는 경우 이러한 객체를 구문 분석할 때 오타나 기타 구문 오류가 발생할 가능성이 없습니다. 간단한 실수를 방지하고 코드에서 바로 요청 구조를 볼 수 있으므로 (예: )을 열고 요청/응답하는 본문을 확인하는 데 필요한 요청을 찾을 필요가 없습니다. 와 함께. HTTP 컬렉션 Postman 당신의 경험과 그것에 대해 어떻게 생각하는지 알려주십시오.
