+2

[JS Testing - P2] Thiết lập Static Analysis Test trong ứng dụng React-Typescript

Trong bài viết lần này, mình sẽ hướng dẫn các bạn setup một số công cụ cơ bản phục vụ cho Static Analysis Test mà team mình đang sử dụng trong ứng dụng React

ESLint

ESLint cung cấp cho chúng ta một loạt những quy tắc khi code, mọi thành viên khi tham gia vào dự án đều phải tuân theo những quy tắc này. Một số quy tắc có thể kể đến như: không được sử dụng var; phải sử dụng "===" thay thế cho "=="; hoặc không được để lại console.log() trong production...

Nếu chúng ta không tuân theo những quy tắc này, ESLint có thể hiển thị warning hoặc báo lỗi, không cho phép bạn compile code. Ban đầu, việc làm này nghe có vẻ hơi bất tiện, tuy nhiên khi dự án mở rộng và có nhiều developer cùng làm việc trên một sourcecode, việc sử dụng Linting là điều bắt buộc để đảm bảo duy trì chất lượng code của team.

Nếu các bạn sử dụng create-react-app để khởi tạo dự án, bạn sẽ không cần phải cài đặt ESLint do công cụ này đã được tích hợp sẵn bởi React Team. Tuy nhiên, bạn vẫn cần phải cài đặt một số các plugins đi kèm: đây là những plugins với set những quy tắc có sẵn, được cộng đồng khuyên dùng và áp dụng rộng rãi.

Trong những plugins đi kèm:

  • eslint-config-prettiereslint-plugin-prettier sẽ giúp ESLint tránh những xung đột và không check lại những quy tắc đã bao hàm trong tool Prettier (mình sẽ nói rõ hơn về Prettier ở dưới)
  • @typescript-eslint/parser sẽ biến sourcecode của bạn thành dữ liệu dạng Abstract Syntax Tree (AST) để ESLint có thể kiểm tra syntax và áp dụng các quy tắc linting. Ngoài ra AST còn cho phép Typescript compiler có thể đưa ra những gợi ý, giúp bạn sửa lỗi hay tái cấu trúc code.

Để cài đặt:

npm i -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-prettier

Sau khi cài đặt xong, chúng ta tạo file .eslintrc ở root folder. File này cho phép developers có thể cấu hình và đưa ra những quy tắc cho dự án

.eslintrc:

{
	"parserOptions": {
		"ecmaVersion": 2020,
		"sourceType": "module",
		"ecmaFeatures": {
			"jsx": true
		}
	},
	"settings": {
		"react": {
			"version": "detect"
		}
	},
	"parser": "@typescript-eslint/parser",
	"extends": [
        // Đây là nơi chứa plugins với những quy tắc có sẵn
		"plugin:react/recommended",
		"plugin:@typescript-eslint/recommended",
		"prettier/@typescript-eslint",
		"plugin:prettier/recommended"
	],
	"rules": {
        // Bạn có thể thêm những quy tắc tuỳ ý vào phần này
		"strict": ["error", "never"],
		"react/prop-types": 0
	},
	"env": {
		"browser": true
	}
}

Prettier

Nếu ESLint là một công cụ giúp lập trình viên có thể thống nhất về syntax khi viết code thì Prettier lại tập trung vào "vẻ ngoài" của một đoạn code. Như cái tên của nó, Prettier sẽ làm code của bạn đẹp đẽ, gọn gàng và ngăn nắp hơn.

Hãy tượng tượng về trường hợp khi bạn thấy 3 đoạn code tương tự được viết bởi 3 lập trình viên khác nhau:

// TH1:
const example = ( args) => 
{
    console.log('This is an example of how ugly the code can be   ')
}

// TH2:
const example = ( args) => {
    console.log('This is an example of how ugly the code can be   ')}

// TH3:
const example = ( args) => {console.log('This is an example of how ugly the code can be   ')}

Rõ ràng, ngoài việc thống nhất về mặt syntax trong dự án, chúng ta cũng sẽ cần một tiêu chuẩn chung cho việc format code. Theo cá nhân mình, ngoài việc code của bạn được sắp xếp gọn gàng, Prettier còn mang lại một lợi ích quan trọng đó chính là giúp bạn có thể dễ dàng đọc code của người khác.

Để cài đặt:

npm i -D prettier

Tương tự như khi cài đặt ESLint, chúng ta cũng tạo một file .prettierrc ở root folder để chứa những thiết lập cho Prettier:

.prettierrc:

{
  "arrowParens": "avoid",
  "bracketSpacing": false,
  "insertPragma": false,
  "printWidth": 80,
  "proseWrap": "preserve",
  "requirePragma": false,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "all",
  "tabWidth": 2,
  "useTabs": true
}

Prettier Playground cho phép bạn thử nghiệm những thiết lập Prettier. Hãy thử sử dụng nhiều format khác nhau setting nào sẽ phù hợp với bạn nhất.

Cấu hình scripts trong file package.json:

Sau khi đã cấu hình xong những quy tắc về linting cũng như format code, chúng ta sẽ viết một số scripts để áp dụng 2 tools này:

"scripts": {
		"start": "node scripts/start.js",
		"build": "node scripts/build.js",
		"test": "node scripts/test.js",
		"lint": "eslint '*/**/*.{js,ts,tsx}' --ignore-path ./.gitignore --quiet --fix",
		"prettier": "prettier --config ./.prettierrc.json --ignore-path ./.gitignore --write . -c"
	},

Với câu lệnh npm run lint, ESLint sẽ scan qua tất cả những file có đuôi js, ts và tsx; ngoại trừ những file được mô tả trong .gitignore. Sau đó, công cụ này sẽ tự động sửa những lỗi mà nó có thể sửa và cuối cùng đưa ra những cảnh báo trong trường hợp có lỗi xảy ra ở trong terminal.

Đối với câu lệnh npm run prettier, Prettier sẽ ghi nhớ toàn bộ cài đặt ở trong file .prettierc và áp dụng chúng vào việc format code ở tất cả các file, ngoại trừ những file được đề cập trong .gitignore.

Ngăn chặn việc commit những đoạn code không đạt chất lượng

Sau khi đã đặt ra những tiêu chuẩn chất lượng của code, làm sao để ngăn chặn những đoạn code không đủ tiêu chuẩn được commit ? Có 2 công cụ phổ biến được sử dụng trong tình huống này:

  • husky tự động chạy linting trước khi commit hoặc push, ngăn chặn những file bị lỗi được đẩy lên server
  • lint-staged giúp chúng ta linting những file được staged bởi Git

Để cài đặt:

npm i -D lint-staged husky

Sử dụng husky và lint-staged trong config ở package.json

"husky": {
		"hooks": {
			"pre-commit": "lint-staged"
		}
	},
"lint-staged": {
    "*.{js,ts,tsx}": [
        "eslint --fix"
    ]
}

Chú thích: câu lệnh lint-staged sẽ scan qua tất cả các file với đuôi js, ts, tsx và được staged bởi Git, sau đó linting và tự động sửa những lỗi có thể. Husky sẽ chạy lint-staged trước câu lệnh git commit và chỉ khi nào code hết những bài test mới có thể được commit lên server.


Kết luận

Với những thiết lập ở trên, chúng ta đã đảm bảo được một trong bốn tầng lớp của javascript testing. Trong bài viết tiếp theo, mình sẽ giới thiệu tới các bạn layer thứ hai - đó chính là Unit Test


All Rights Reserved

Viblo
Let's register a Viblo Account to get more interesting posts.