TypeScript의 모카

Rana Hasnain Khan 2024년2월15일
TypeScript의 모카

Mocha와 TypeScript에서 Mocha를 설치하고 테스트를 실행하는 방법을 소개합니다.

TypeScript의 모카

상업용 앱이나 수백만 명의 사용자가 사용할 애플리케이션에서 작업할 때 우리는 애플리케이션이 오류 없이 완벽하게 실행되도록 해야 합니다. 이를 위해 JavaScript 테스트 프레임워크인 Mocha를 사용합니다.

Mocha를 사용하여 비동기 테스트 및 커버리지 보고서를 실행할 수 있으며 이를 사용하여 어설션 라이브러리를 테스트할 수 있습니다.

이 튜토리얼에서는 TypeScript에 Mocha를 설치하는 방법을 소개합니다. 아시다시피 JavaScript 프레임워크이며 TypeScript로 Mocha를 설정하는 것은 쉬운 작업이 아니며 시간과 노력이 필요합니다.

Mocha 및 ts-node의 변경 및 업데이트와 관련된 모든 작업을 처리하는 TypeScript 프레임워크를 사용할 수 있으며 테스트 작성에 대해서만 걱정할 수 있습니다. ts-mocha 라이브러리는 Mocha를 쉽게 구현하고 사용하는 데 사용할 수 있는 편리한 라이브러리입니다.

프로젝트에 설치하려면 다음 명령을 실행할 수 있습니다.

npm i ts-mocha

다음 명령을 실행하여 프로젝트에 mochaexpect 유형을 설치하는 것도 중요합니다.

npm i @types/mocha @types/expect

테스트를 추가하고 실행하는 동안 대부분 typescript-require와 관련된 오류가 발생합니다. 다음 명령을 사용하여 ts-node의 종속성을 설치하면 이 문제를 쉽게 해결할 수 있습니다.

npm i ts-node

이 명령은 필요한 라이브러리를 설치하고 mocha를 사용하여 테스트를 쉽게 만들고 실행할 수 있습니다. Mocha는 주로 chai라는 다른 프레임워크와 함께 사용됩니다.

Node.js용 BDD/TDD 어설션 라이브러리입니다. 이 라이브러리는 모든 테스트 프레임워크와 쌍을 이루어 테스트 작성을 돕습니다.

이제 예제 Mocha 테스트를 생성하고 응용 프로그램에서 이를 생성하고 사용할 수 있는 방법을 확인하는 예제를 살펴보겠습니다. 먼저 새 프로젝트를 설치해야 합니다.

이를 위해 mocha라는 이름으로 새 디렉토리를 만들고 터미널에서 아래 명령을 실행하여 프로젝트를 초기화합니다.

npm init

프로젝트에 대한 옵션을 요청하고 package.json 파일을 생성합니다. 이 단계를 완료하면 이제 다음 명령을 사용하여 dotenv로 Express를 설치합니다.

npm i --save express dotenv

Express를 설치한 후 프로젝트에 mocha, chai, typescript, nodemon, supertest, ts-nodetsconfig-paths를 설치합니다. 앞에서 언급했듯이 mochachai는 테스트를 작성하는 데 함께 사용됩니다.

typescript에서 테스트를 생성하므로 typescript를 설치합니다.

프로젝트 파일을 변경할 때마다 프로젝트를 업데이트할 수 있기 때문에 nodemon을 사용합니다. Mocha 테스트에서 엔드포인트를 테스트할 수 있는 supertest를 설치합니다.

이는 API를 테스트하는 데 도움이 됩니다. 노드 프로젝트에서 TypeScript를 사용할 수 있게 해주는 ts-node를 설치하고 Mocha 테스트에서 노드 프로젝트 전체에서 절대 가져오기를 사용할 수 있게 해주는 tsconfig-paths가 필요합니다.

아래와 같이 아래 명령을 실행하여 설치할 수 있습니다.

npm i -D mocha chai typescript nodemon supertest ts-node tsconfig-paths

이제 TypeScript는 유형을 알아야 하므로 이러한 종속성의 유형을 설치합니다. 다음 명령을 사용하여 쉽게 설치할 수 있습니다.

npm i -D @types/chai @types/mocha @types/node @types/supertest

아래와 같이 package.json scripts 섹션에 builddev 명령을 추가합니다.

"scripts": {
    "build": "tsc -p .",
    "dev": "NODE_ENV=dev nodemon -r tsconfig-paths/register src/app.ts",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

또한 프로젝트에서 TypeScript 구성을 초기화해야 합니다. 다음 명령을 사용하여 쉽게 할 수 있습니다.

tsc --init

이 명령은 TypeScript의 모든 구성을 포함하는 tsconfig.json이라는 새 파일을 생성합니다. 이 파일에서 몇 가지를 변경해야 합니다.

먼저 TypeScript가 컴파일될 때 브라우저에서 사용할 수 있는 많은 JavaScript를 출력할 수 있도록 출력 디렉토리를 변경해야 합니다. 아래에 나와 있습니다.

"rootDir": "./src",
"moduleResolution": "node",
"baseUrl": "./src",

이제 아래와 같이 package.json 파일에 test 명령을 설정하거나 추가합니다.

"test": "NODE_ENV=test mocha --check-leaks -r tsconfig-paths/register -r ts-node/register \"test/**/*.spec.ts\""

테스트를 위한 새 디렉토리를 생성하고 index.specs.ts 파일을 테스트 디렉토리에 추가합니다. 아래와 같이 server-runs.specs.ts 파일을 포함하는 server라는 이름으로 테스트 디렉토리 내에 또 다른 디렉토리를 생성합니다.

typescript에서 mocha로 테스트하기 위한 폴더 구조

두 파일에서 몇 가지 샘플 테스트를 만들어 보겠습니다. index.specs.ts의 테스트는 아래와 같습니다.

describe('test', function(){
    it("testing", function(){
        console.log('Looks fine')
    });
})

아래와 같이 server-runs.specs.ts에 테스트를 생성해 보겠습니다.

describe('server checking', function(){
    it("server is created without any error", function(){
        console.log('Looks fine')
    });
})

테스트를 실행하고 다음 명령으로 어떻게 작동하는지 확인해 봅시다.

npm test

출력:

typescript에서 확인하는 mocha 테스트

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn