อยากเขียน Unit Test ด้วย Jest ใน Angular8

เริ่มจาก install jest กันก่อนเลยค่ะ

yarn add jest @types/jest

หลังจากนั้นลง jest-schematic โดย jest-schematic จะทำหน้าที่แก้ไขไฟล์ รวมถึงลบไฟล์ต่าง ๆ ที่ไม่ได้ใช้ และเพิ่มไฟล์เพื่อให้สามารถใช้งาน jest ได้

ng add @briebug/jest-schematic

เพียงเท่านี้เราจะสามารถ run npm test ได้แล้วค่ะ

แต่ถ้าอยากใช้ command ด้วย ng test จะยังไม่สามารถใช้งานได้

ตอนเรา run ng test ใน file angular.json ยัง run karma อยู่ ดังนั้นเราจะมาเปลี่ยน run ด้วย jest กัน

โดยแก้ไขข้อมูลที่ “test” ใน file angular.json ตามข้อมูลด้านล่าง

"test": {
     "builder": "@angular-builders/jest:run",
     "options": {
        "preset": "jest-preset-angular",
        "configPath": "./src/jest.config.js",
        "assets": [
           "src/favicon.ico",
           "src/assets"
        ],
        "styles": [
           "src/styles.css"
        ],
       "scripts": []
   }
}

และ install @angular-builders/jest เพื่อ ทำให้ ng test สามารถ run jest ได้

yarn add @angular-builders/jest

เมื่อเราลอง run ng test ดูจะพบว่าได้ error ประมาณนี้

ปรับ version ของ ใน package.json ตามด้านล่าง

“jest”: “24.9.0”
“@types/jest”: “24.9.0”
“jest-preset-angular”: “7.1.1”

หลังจากนั้นแก้ไขตรง jest ด้านล่างที่ไฟล์ package.json

"jest": {
    "verbose": true,
    "setupFilesAfterEnv": [
        "./src/setup-jest.ts"
    ],
    "globals": {
        "ts-jest": {
            "tsConfig": "./tsconfig.spec.json",
            "diagnostics": false,
            "stringifyContentPathRegex": "\\.html$",
            "astTransformers": [
                  "<rootDir>/node_modules/jest-preset-angular/InlineHtmlStripStylesTransformer"
            ]
      }
}

และลบ yarn.lock และ yarn install ใหม่อีกรอบ

Fix warning

เมื่อเราลอง run ng test ดูจะพบว่าได้ warning ประมาณนี้

สร้าง file src/jest.config.js และใส่ข้อมูลตามด้านล่าง

module.exports = { preset: 'ts-jest'};

เพียงเท่านี้เราก็สามารถ run ng test ได้แล้วค่ะ