รีวิวการ migrate test Angular จาก jasmine ไปใช้ jest

เนื่องจากในทีมประสบปัญหา Angular test ที่ใช้ตัว jasmine กับ karma ช้า และใช้ทรัพยากรสูงมาก ถึงขนาดพัดลมเครื่องดังและร้อนมากถึงขนาดปิ้งขนมปังได้เลย และก็ตายเพราะ memory เกิน อยู่บ่อยครั้ง

จาก บล็อกพี่อู ที่แนะนำวิธีการ setup jest สำหรับโปรเจ็ค Angular ซึ่งเมื่อ setup และ migrate function ทุกอย่างไปใช้ function ของ jest หมดแล้ว ก็ยังใช้งานไม่ได้อยู่ดี พบปัญหาเล็กน้อยดังนี้

ในโปรเจ็คมีการใช้ library บางตัว ทำให้เทสตาย

จากที่เห็นคือมีการ import library บางตัวเข้ามาแล้ว jest ไม่สามารถอ่าน keyword ‘export’ ได้ สิ่งที่ต้องทำคือไปทำให้มันอ่านได้ ซึ่งโดยปกติคือใช้ babel ร่วมกับ jest

ที่ไฟล์ package.json ไปเพิ่มอีก field ใน section jest ว่า trasformIgnorePatterns

"jest": {
    "preset": "jest-preset-angular",
    "setupTestFrameworkScriptFile": "<rootDir>/src/setupJest.ts",
    "transformIgnorePatterns": [
      "node_modules/(?!ngx-mydatepicker-thai)"
    ]
}

ที่ไฟล์ tsconfig.json ไปเพิ่ม allowJS ใน compilerOptions

{
  "compilerOptions": {
    "allowJs": true
  }
}

โหลด babel ด้วย yarn add --dev babel-preset-env แล้วไปเพิ่ม section babel ใน package.json

"babel": {
    "presets": [
      "env"
    ]
}

ใน section jest ในไฟล์ package.json เพิ่ม section transform ไปอีกเพื่อเลือกให้ jest transform ไฟล์ด้วย preprocessor ตัวไหน

"jest": {
    "preset": "jest-preset-angular",
    "setupTestFrameworkScriptFile": "<rootDir>/src/setupJest.ts",
    "transformIgnorePatterns": [
      "node_modules/(?!ngx-mydatepicker-thai)"
    ],
    "transform": {
      "^.+\\.(ts|html)$": "<rootDir>/node_modules/jest-preset-angular/preprocessor.js",
      "^.+\\.js$": "babel-jest"
    }
},

รัน jest ใหม่อีกครั้ง ก็จะไม่พบ error unexpected token อีก

ข้อดีจากการเปลี่ยนไปใช้ jest

1.เร็วกว่า

2.จับบางเทสที่ควรจะ fail แต่ไม่ fail ใน jasmine ได้ ยกตัวอย่างเช่น
ในเทสนี้ ถ้าในโค้ดเราส่ง FormData ที่ไม่มี field ‘file’ เทสก็ยังคงผ่านอยู่ เหมือนตัว jasmine ไม่สามารถเช็คค่าที่อยู่ภายใน FormData ได้ แต่เมื่อเปลี่ยนไปใช้ jest เทสนี้จะผิด

it('should call upload file api correctly', () => {
    const mockFile = new File([''], 'example.pdf', {
      type: 'application/pdf',
      lastModified: 1527052033702
    });
    service.upload(mockFile).subscribe();
    const req = backEnd.expectOne(`http://localhost:3000/upload`);
    const expectedFormData: FormData = new FormData();
    expectedFormData.append('file', mockFile);
    expect(req.request.body).toEqual(expectedFormData);
});

3.error อ่านรู้เรื่องมากขึ้น โดยเฉพาะ เวลา error ใน ngOnInit จะไม่ขึ้นว่า
[object ErrorEvent] thrown อีกแล้ว ถ้าเกิดมีตรงไหนมีการจิ้ม undefined jest จะบอกจุดที่ error อย่างถูกต้อง

error in jasmine

error in jest

4.เครื่องไม่ร้อน พัดลมไม่ดังแล้ว

5.การตั้งค่าบน Jenkins เพื่อทำ CI/CD ซับซ้อนน้อยลง เพราะไม่ต้องใช้ Browser ในการรันเทส

จุดสังเกต

เมื่อเรามาใช้ jest ในการรันเทส angular ซึ่งเป็น typescript jest ไม่ได้มีการพ่น compilation error ออกมา ซึ่งจริงๆก็ไม่ได้จำเป็นเพราะ compilation error จะแสดงใน editor อยู่แล้ว