ใช้ Jest ใน Angular แบบง่ายกว่าเดิม ด้วย jest-schematic

ในบันทึกก่อนหน้าโน้น เคยจดเอาไว้เรื่องเกี่ยวกับวิธีการใช้ Jest ใน Angular จะเห็นว่ามีขั้นตอนมากมายว่าจะใช้ jest ได้

วันนึงตั้มตูมิตมาบอกว่า ใช้ jest-schmatic ดิ ง่ายกว่าเดิมเยอะ เลยไปลองดูรายละเอียดก็เจอว่า มันง่ายกว่าเดิมมากจริง ๆ

Schematic คืออะไร

schematic เป็น workflow tool ที่จะคอยช่วยเพิ่มโค้ดลงใน project ของเรา หรือแก้ไขโค้ดใน project ของเรา เพื่อแก้ปัญหา dependency หรือเพิ่ม configuaration หรืออื่น ๆ กับ project ของเรา แทนที่เราจะต้องไปทำทุกอย่างด้วยวิธี manual ซึ่งอาจจะทำให้เกิดความผิดพลาดได้ง่าย ก็เปลี่ยนมาใช้ schematic ซึ่งจะทำทุกอย่างให้เราโดยอัตโนมัติ

Jest Schematic

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

ติดตั้ง jest

วิธีติดตั้ง ง่ายมาก

ng add @briebug/jest-schematic

จบเลย

หรือถ้าอยากจะติดตั้ง jest-schematic ลงใน global

npm install -g @briebug/jest-schematic
ng g @briebug/jest-schematic:add

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

test

ตอนสั่ง test ก็ใช้ npm run test หรือ yarn test ได้เลย

แล้ว ng test ล่ะ

ใน jest-schematic เวอร์ชั่นนี้ ng test จะยังผูกติดกับ karma อยู่ (default ที่ angular-cli สร้างให้) หากต้องการใช้ผ่าน ng test จะต้องแก้ไขด้วยวิธี manual ตามนี้

Install @angular-builder/jest

npm i -D @angular-builders/jest

หรือผ่าน yarn

yarn add --dev @angular-builders/jest

แก้ไข angular.json

เปิดไฟล์ angular.json ใน block test แก้เป็นแบบนี้

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

สิ่งที่เปลี่ยนไปใน angular.json คือ เปลี่ยน builder เป็น @angular-builders/jest:run และลบ options ที่ไม่ได้ใช้ออก และใส่ configPath ซึ่งเป็น configuration path ของ jest ให้ถูกต้อง

เท่านี้ก็ใช้ ng test เพื่อรัน jest ได้เลย

หมายเหตุ

jest-schematic ใช้งานได้กับ angular 6 ขึ้นไปเท่านั้น

อ้างอิง

• https://github.com/briebug/jest-schematic
• https://codeburst.io/angular-6-ng-test-with-jest-in-3-minutes-b1fe5ed3417c

pingback : https://chonla.com/2018/11/16/using-jest-in-angular-with-schematics/