บันทึกวิธีการติดตั้ง typescript project สำหรับ jest โดยที่ไม่ได้ใช้ framework

สร้าง project ใหม่

เราจะสร้างโครงการ TypeScript ตั้งแต่เริ่มต้น ขั้นแรกเรามาสร้างไดเร็กทอรีสำหรับ project ของเรา:

mkdir typescript-jest
cd typescript-jest

เราจะใช้ npm เป็นตัวจัดการแพ็คเกจของเรา และเราเริ่มต้น project ของเราด้วยคำสั่ง:

npm init -y

เพิ่มเติมด้วยการสร้างไฟล์ .gitignore โดยใช้คำสั่ง

npx gitignore node

ตอนนี้เราจะติดตั้ง required dependencies สำหรับ TypeScript และ Jest ดังนี้:

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

Configure TypeScript

เราจำเป็นต้องกำหนด TypeScript ใน project ของเรา เราจะใช้ built-in Typescript compiler ที่ชื่อ tsc ในตัวเพื่อเริ่มต้น project ซึ่งสามารถทำได้ดังนี้:

npx tsc --init

ถ้าสำเร็จก็จะได้ outup หน้าตาแบบนี้

Created a new tsconfig.json with:

  target: es2016
  module: commonjs
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true

เข้าไปดูใน project เราจะเจอไฟล์ tsconfig.json เพิ่มเข้ามา ซึ่งเป็นไฟล์ config ของ typescript ถ้าเราเข้าไปดูในไฟล์เราจะเห็นค่า config ต่างๆ ที่กำหนดไว้ (บางอย่างก็มี comment ไว้ หากต้องการใช้ก็ลบ comment ออกได้เลย)

มาดูตัวเริ่มต้นหลักๆ ที่เราสนใจกัน

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "rootDir": "./src",
    "outDir": "./dist",
    "sourceMap": true
  }
}

เนื่องจากว่าเราเริ่มต้นจาก project เปล่าๆ เลย เวลาที่สร้างไฟล์ tsconfig จึงยังไม่มีการกำหนด ที่อยู่ของไฟล์มาให้เรา เราจึงต้องเข้ามากำหนดเอง โดยจะกำหนดดั้งนี้

  • rootDir: ตำแหน่งของ directory  ที่ใช้เก็บ code ของเราอยู่ที่ไหน
  • outDir: ตำแหน่งของ directory  ที่ใช้เก็บ code หลังจาก build เป็น js แล้ว
  • sourceMap: ใช้สำหรับช่วยให้การ dubug ได้ง่ายขึ้น โดยการ map code ของ ts กับ ไฟล์ js ที่ผ่านการ build แล้ว

ในคำสั่งด้านบน เรากำหนดให้

{
  "compilerOptions": {
    ...
    "rootDir": "./src",
    "outDir": "./dist",
    "sourceMap": true
  }
}

ดังนั้นอย่างลืมสร้างโฟล์เดอร์ src ขึ้นมาด้วย

Configure Jest

ต่อไปเป็นการ config ตัวทดสอบของเรา โดยเราจะใช้ jest ที่เป็น library สำหรับทดสอบ ซึ่งมันใช้งานง่ายอยู่แล้ว

โดยทั่วไปแล้ว Jest สามารถทำงานได้โดยไม่ต้องมีการกำหนดค่าใดๆ เลย แต่เนื่องจากเราจะเขียนการทดสอบของเราใน TypeScript ซึ่งต้องมีการกำหนดค่าเล็กน้อยเพื่อแปลง TypeScript ด้วย ts-jest

ts-jest สามารถสร้างการกำหนดค่าเริ่มต้นได้ดังนี้:

npx ts-jest config:init

เราจะได้ไฟล์ jest.config.ts มา

ขั้นตอนต่อไป คือ การเพิ่มคำสั่ง test สำหรับ Jest ในไฟล์ package.json:

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

เท่านี้เราก็สามารถเริ่มใช้งาน jest ได้แล้ว

Start Test and Run Test

ทีนี้เราลองมาเขียน test เพื่อทดสอบกัน โดยสมมติว่า เราต้องการทดสอบฟังก์ชั่น add ที่รับค่ามา 2 ค่า แล้วส่งผลบวกของ 2 ค่านั้นกลับไป

เริ่มที่สร้างไฟล์ math.ts ไว้ในโฟล์เดอร์ src และเพิ่ม code นี้เข้าไปก่อนเลย 

export function add(x: number, y: number): number {
  return x + y
}

src/math.ts

จากนั้นให้สร้างไฟล์ math.test.ts ไว้ที่โฟล์เดอร์ test และเขียนการทดสอบดังนี้

import { add } from '../src/math'

describe('Math function', () => {
  it('should add 5 by 3', () => {
    const result = add(5, 3)
    expect(result).toEqual(8)
  })
})

test/math.test.ts

จากนั้น ลอง run ทดสอบด้วยคำสั่ง test ที่เราได้กำหนดไว้ใน package.json

npm test

เราจะได้ output ออกมาหน้าตาเป็นแบบนี้

> [email protected] test
> jest

 PASS  test/math.test.ts
  Math function
    √ should add 5 by 3 (1 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.051 s
Ran all test suites.

เท่านี้เราก็สามารถเขียน unit test กับ typescript ด้วย jest ได้แล้ว