TDD with Typescript and Jest: Starter project

Photo by Adi Goldstein on Unsplash

Đây là bài viết hướng dẫn setup một dự án backend với Typescript và Jest.

Đây có thể không phải là một series, nhưng tôi sẽ viết một số các bài viết liên quan tới chủ đề TDD với Typescript và Jest. Điều này có nghĩa tôi sẽ viết lại một vài ví dụ bằng Typescript theo hướng TDD. Bài viết này sẽ là phần mở đầu, chuẩn bị có các bài viết sau này thuộc cùng chủ đề.

Khởi tạo dự án

Hãy bắt đầu bằng việc khởi tạo một dự án sử dụng npm:

npm init -y

Câu lệnh trên sẽ tạo ra file package.json

Cài đặt các package dành cho việc phát triển

Dự án của chúng ta sẽ được viết bằng Typescript, nên typescript sẽ là gói đầu tiên chúng ta cần:

npm install typescript -D

Tùy chọn -D có nghĩa chúng ta chỉ cài đặt và sử dụng typescript trong quá trình phát triền.

Cấu hình trình biên dịch Typescript

Typescript compiler sẽ chuyển mã của chúng ta từ cú pháp Typescript sang mã Javascript. Việc chuyển đổi sẽ tuân theo một số cài đặt, các cài đặt này sẽ được định nghĩa ở file tsconfig.json

Để sinh ra file tsconfig.json tôi dùng lệnh sau(Các bạn có thể tạo file này bằng tay):

npx tsc --init

File tsconfig.json sẽ được tạo với một số cài đặt mặc định. Trong dự án này, nội dung của file sẽ là:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

!!! Các bạn có thể tự tìm hiểu ý nghĩa các cài đặt để hiểu rõ hơn.

Thêm câu lệnh để build dự án

Khi chúng ta muốn triển khai dự án như một dự án Javascript thông thường, chúng ta phải “dịch” các file code thành mã Javascript. Để làm điều này một cách dễ dàng, chúng ta sẽ tạo một câu lệnh có thể chạy với lệnh npm. Trong file package.json, cập nhật phần script:

"scripts": {
    "build": "tsc",
},

Từ giờ, mỗi khi cần build dự án, chúng ta sẽ dùng lệnh npm run build. Có nhiều cách để làm điều tương tự, nhưng tôi nghĩ đây là cách phổ thông cho các dự án.

Thêm ví dụ code bằng Typescript

Để chắc chắc mọi thứ chúng ta đang làm không có sai sót gì, chúng ta sẽ thêm vào dự án một đoạn mã đơn giản bằng Typescript. Và kiểm tra xem nó có hoạt động hay không?

Chúng ta tạo file calc.ts với đường dẫn src/calc.ts (Các file logic code – *.ts sẽ nằm trong thư mục src)

class Calc {
  add(a: number, b: number): number {
    return a + b;
  }
}
export default new Calc();

Một class đơn giản với một phương thức – add.

Hãy chạy thử lệnh npm run build. Nếu mọi thứ ổn, chúng ta sẽ thấy thư mục dist sẽ được tạo, trong thư mục có file calc.js.

Thêm và cấu hình Jest

Đây là phần quan trọng của bài viết này, tất nhiên, vì chúng ta sẽ dụng Jest để viết test cho dự án.

Cài đặt Jest và định nghĩ kiểu của Jest (khi bạn làm việc với Typescript, đây sẽ là phần không thể thiếu):

npm i jest ts-jest @types/jest

jest – Trình chạy test, test framework

ts-jest – Tích hợp Jest cho Typescript

@types/jest – Định nghĩ kiểu cho Jest

Cấu hình cho Jest: Tạo file jest.config.js tại thư mục gốc của dự án:

module.exports = {
  roots: [
    "<rootDir>/src"
  ],
  testMatch: [
    "**/__tests__/**/*.+(ts|tsx|js)",
    "**/?(*.)+(spec|test).+(ts|tsx|js)"
  ],
  transform: {
    "^.+\\.(ts|tsx)$": "ts-jest"
  },
  collectCoverageFrom: [
    "**/*.{js,jsx,ts,tsx}",
    "!**/*.d.ts",
    "!**/node_modules/**",
  ],
  globals: {
    "ts-jest": {
      tsconfig: "tsconfig.json",
    },
  },
}

Hãy thêm một lệnh test vào khối script của file package.json. Chúng ta có thể chạy test thông qua lệnh này:

"test: "jest"

Thêm test case

Nếu giờ chúng ta chạy lệnh npm run test, chúng ta sẽ thấy lỗi vì hiện tại trong dự án chưa có test case nào cả.

Bây giờ chúng ta sẽ tạo ra một test case cho phương thức add của class Calc. Gợi ý của tôi là chúng ta sẽ tạo file test ngay cạnh file logic code.

Tạo file src/calc.spec.ts ngay cạnh file calc.ts. Phần mở rộng .spec.ts đánh dấu đây là một file test (bạn cũng có thể sử dụng phần mở rộng .test.ts, những từ khóa này được định nghĩa ở file test.config.js).

import calc from './calc';
describe('Calc', () => {
  test('should return 10 for add(6, 4)', () => {
    expect(calc.add(6, 4)).toBe(10);
  });
test('should return 9 for add(10, -1)', () => {
    expect(calc.add(10, -1)).toBe(9);
  });
});

Một test case đơn giản, vì phương thức add là một hàm thuần túy, nên chúng ta không cần tới những tính năng như spy hay mock.

Chạy lại câu lệnh test npm run test. Kết quả hiển thị trên terminal sẽ giống như ảnh này:

Như thế là đủ để bắt đầu làm việc với Typescript và Jest. Phần bên dưới của bài viết là phần mở rộng, những phần này giúp cho việc phát triển dự án tốt hơn.

Eslint

Chúng ta sẽ dùng Eslint để định dạng code, giữ các chuẩn code khi phát triển dự án.

Cài đặt eslint và các plugin cho eslint

npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

Tạo file cấu hình cho eslint (bạn có thể tạo file này bằng cách chạy lệnh npx eslint –init).

Ở đây mình sử dụng file .eslintrc.js làm file cấu hình cho eslint

module.exports = {
  "env": {
    "browser": true,
    "commonjs": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 12
  },
  "plugins": [
    "@typescript-eslint"
  ],
  "ignorePatterns": [
    "dist"
  ],
  "rules": {
    "no-console": 2,
  }
};

Thêm lệnh lint cho dự án. Cập nhật nội dung khối script của file package.json

"lint": "eslint ./src --ext .ts"

Husky

Husky là một công cụ nhỏ, giúp chúng ta tự động làm một số công việc khi làm việc với git.

Thêm husky:

npm install husky -D

Cài đặt husky cho dự án:

npx husky install

Trước khi commit, chúng ta muốn kiểm tra định dạng code của toàn bộ dự án một lần. Hãy thêm “before git commit hook” với husky:

npx husky add .husky/pre-commit "npm run lint"

Trước khi push, chúng ta muốn chạy lại test cho toàn bộ dự án. Hãy thêm “before git push hook”:

npx husky add .husky/pre-push "npm run test"

Tổng kết

Thế là đủ cho một starter project. Các bạn có thể tham khảo mã nguồn ở link Github.

Nếu các bạn sử dụng vscode, trong mã nguồn của dự án này tôi đã viết lại các bước thực hiện theo bài viết, các bước này được trình bày bởi Codetour vscode extension.

Cảm ơn bạn đã đọc bài!

Bài viết được viết bởi cùng tác giả tại link: TDD with Typescript and Jest: Starter project

Từ khóa: , , ,