[JS] – Unit test với Jest & ES6

Ở bài trước: [JS] – Unit Test đơn giản với Jest chúng ta đã nghiên cứu chạy Unit Test với syntax Javascript bình thường. Bây giờ nhu cầu của chúng ta là muốn viết code Javascript bằng ES6 để code sạch đẹp gọn gàng hơn thì làm sao?

Sau đây mình sẽ hướng dẫn các bạn chạy Jest với ES6 syntax nhé.

Khởi tạo Folder & Files

Git init

Git ignore

Tạo folder có cấu trúc như sau

Install Packages

Tiếp theo đó bạn cần install các package cần thiết để Jest có thể chạy và quét code của chúng ta

npm install --save-dev jest babel-jest @babel/preset-env

Sau khi run câu lệnh xong thì cấu trúc thư mục của chúng ta sẽ có thêm 2 files & 1 folder sau

Run Unit Test

Bây giờ chúng ta muốn sẽ chạy test cho folder __test__

Chúng ta cần phải tạo câu lệnh npm để run npm run test

Để làm được điều đó trong file package.json chúng ta bổ sung thêm đoạn scripts này vào

{
  "devDependencies": {
    "@babel/preset-env": "^7.16.11",
    "babel-jest": "^27.5.1",
    "jest": "^27.5.1"
  },
  "scripts": {
    "test": "jest"
  }
}

Sau đó chạy câu lệnh npm run test chúng ta sẽ thu được kết quả như sau

Đọc thông báo lỗi nó bảo là file match.test.js của chúng ta phải có ít nhất 1 test case thì mới chạy. Ok viết test thôi

import { add } from "../math";

describe("Success Cases", () => {
  test("Return correct when add", () => {
    const result = add(1, 2);
    expect(result).toEqual(3);
  });
});

Viết xong rồi thử chạy lại câu lệnh npm run test xem nào. OMG vẫn lỗi. cay thế chứ lị

Đọc lỗi này thì nó bảo cần dùng thêm Babel plugin nữa để cho code có thể biên dịch ra thành Javascript thuần để chạy (vì code chúng ta đang viết bằng ES6 nên Jest đọc không hiểu)

Tìm hiều thêm về Babel ở đây: https://babeljs.io/docs/en/

Sửa lỗi

Ok, nếu đã vậy chúng ta phải tạo thêm 1 file mới là `babel.config.cjs với nội dung như sau

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: {
          node: "current",
        },
      },
    ],
  ],
};

Lưu ý: có nhiều nguồn trên internet nói là tạo babel.config.js nhưng mà sẽ lỗi nhé. phải là .cjs mới chạy được

Ok sau khi tạo file babel.config.cjs xong thì thử chạy lại phát nữa xem sao

Kết quả cuối cùng

Gõ `npm run test lần nữa

Xong roài commit code của bạn lên nhé.

Bài sau: Nâng cao show code coverage khi chạy Jest