Typescript와 Jest를 사용한 Jest Typescript 단위 테스트

https://muhajirframe.com/writing/unit-test-typescript-jest/에 처음 게시됨

이 기사에서는 Typescript + jest에서 간단한 단위 테스트를 다루려고 합니다.

URL이 내부 링크인지 외부 링크인지 감지하는 간단한 유틸리티를 만들 것입니다.
예를 들어 https://www.google.com는 외부 링크이고 /page1는 내부 링크입니다. 우리는 프로젝트 이름을 is-internal-link 로 지정하지만 아무 이름이나 지정할 수 있습니다.

전제 조건

노드JS

VSCode + Jest 플러그인(선택 사항)

새 디렉터리 만들기

mkdir is-internal-link

npm 초기화

npm init

종속성 설치

npm install --save-dev @types/jest @types/node jest ts-jest typescript

만들기jest.config.js

module.exports = {
  roots: ['<rootDir>/src'],
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },
  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
}

만들기tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": ["es2015"],
    "strict": true,
    "declaration": true,
    "outDir": "dist",
    "sourceMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

좋습니다. 코드를 작성할 준비가 되었습니다. 파일 생성src/main.ts 및 src/main.spec.ts파일 트리는 이제 다음과 같아야 합니다.

.
├── node_modules
├── package-lock.json
├── package.json
├── src
│   ├── main.spec.ts
│   └── main.ts
└── tsconfig.json

좋아하는 편집기에서 엽니다. (VSCode/Atom/Sublime/등).
저는 개인적으로 VSCode를 사용합니다

import { isInternalLink } from './main'

test('should return false given external link', () => {
  expect(isInternalLink('https://google.com')).toBe(false)
})

test('should return true given internal link', () => {
  expect(isInternalLink('/some-page')).toBe(true)
})

이제 이것을 테스트하는 방법이 있습니다.

방법 1

package.json를 엽니다. scripts를 다음으로 교체하십시오.

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

실행npm run test .
이제 코드를 아직 구현하지 않았기 때문에 오류가 표시되어야 합니다. 맞습니까?

방법 2

편집기의 플러그인으로. 나는 이 방법을 선호한다. VSCode에서만 보여드리겠습니다. 좋아하는 편집자도 가지고 있을 수 있습니다.

설치vscode-jest


이 GIF는 vscode-jest가 어떻게 작동하는지에 대한 훌륭한 설명이 되어야 합니다.

계속합시다.


VSCode는 이제 다음과 같을 수 있습니다.

코드 구현

구현하자main.ts

export const isInternalLink = (link: string) => /^\/(?!\/)/.test(link)

main.spec.ts 로 다시 전환하십시오. 이제 오류가 사라지고 녹색으로 바뀌는 것을 볼 수 있습니다.

프로 팁: VSCode split editor을 사용하면 코드(main.ts)와 사양(main.spec.ts)을 동시에 볼 수 있습니다.

TL;DR

첫 번째 면main.tscmd+1cmd+p에서 열기main.ts
열림main.spec.ts 두 번째 면cmd+2cmd+p1main.spec.ts
참고 사항: 저는 VSCode와 Vim의 열렬한 팬이며 VSCode로 생산성을 높이는 방법에 대한 수많은 트릭을 가지고 있습니다. 관심 있으신 분들은 댓글로 알려주세요. 여기에 쓸 수 있습니다.

축하합니다!

방금 Typescript와 Jest로 단위 테스트를 수행했습니다.