Migrate jasmine ไปใช้ jest ใน Angular 6
อะกิมาบอกว่า jest น่าสนใจดีนะ จำได้ว่ามีคนเคยชวนไปใช้ jest แต่ตอนนั้นก็ยังไม่ได้สนใจอะไร ตอนนี้พอมีเวลาก็เลยมาลองซะหน่อย มี project ทดสอบอยู่ตัวนึงที่เอาไว้ใช้สอน robot คือ ng-calculator ซึ่งเดิมใช้ jasmine อยู่ เดี๋ยวจะมาลองเปลี่ยนเป็น jest ดู
ไปอ่านเจอจากใน xfive เจอว่ามันต้องแก้ไขเล็กน้อยเพื่อให้มันใช้ด้วยกันได้ เพราะตัว framework มันมี syntax ไม่เหมือนกัน ไปเจอมาอีกว่า มันมีตัว jest-codemod ที่ช่วย convert จาก code เดิมที่ใช้ jasmine ไปเป็น code ที่ใช้ jest แต่!!!! มันใช้ได้กับ javascript เท่านั้น ใช้กับ typescript ไม่ได้ ดังนั้นช่างแม่งก่อน ลองทำไปแบบลูกทุ่งละกัน
เริ่มจาก ลงของที่ต้องมีก่อน
yarn add — dev jest jest-preset-angular @types/jest
ของที่มันลง ประกอบด้วย
- jest — คือ ตัว test platform ของ jest
- jest-preset-angular — คือ configuration ที่ตั้งค่ามาให้แล้ว
- @types/jest — คือ typing สำหรับ jest
เสร็จแล้วไปเพิ่มไอ้นี่ลงใน package.json
“jest”: {
“preset”: “jest-preset-angular”,
“setupTestFrameworkScriptFile”: “<rootDir>/src/setupJest.ts”
}
ถัดมา สร้างไฟล์ setupJest.ts วางไว้ใน /src มีข้างในเป็นแบบนี้
import ‘jest-preset-angular’;
ที่เหลือไปแก้ npm script ในไฟล์ package.json
“test”: “jest”,
“test:watch”: “jest — watch”,
หลังจากนั้นก็ลองสั่ง npm run test ก็จะเห็นได้ว่ามันใช้ jest แล้ว แต่ error บานเลย เพราะว่า code ที่เรามีอยู่ใน test มันยังใช้กับ jest ไม่ได้
สิ่งที่จะต้องแก้หลังจากย้ายมาใช้ Jest
jasmine.createSpyObj
จากเดิมตอนที่เราสร้าง mock ด้วย jasmine.createSpyObj(‘name’, [‘key’]) ก็ให้เปลี่ยนเป็น {key: jest.fn()} แทน เช่น
const mockObject = jasmine.createSpyObj(‘mockObject’, [‘doSomething’];
เปลี่ยนเป็น
const mockObject = {doSomething: jest.fn()};
เอา @types/jasmine module ออกจาก package.json
yarn remove @types/jasmine
jasmine.createSpy(‘name’)
ตรงที่ใช้ jasmine.createSpy ก็ให้เปลี่ยนมาใช้ jest.fn() แทน
and.returnValue()
ตรงที่ stub value ไว้ด้วย and.returnValue() ก็ใช้ mockReturnValue() เช่น
const mockObject = jasmine.createSpyObj(‘mockObject’, [‘doSomething’]);
mockObject.doSomething.and.returnValue(1);
ก็จะกลายเป็น
const mockObject = {doSomething: jest.fn()};
mockObject.doSomething.mockReturnValue(1);
spyOn().and.callFake()
ตรงที่ใช้ spyOn().and.callFake(() => {}) ก็ใช้ jest.spyOn().mockImplementation(() => {}) แทน
asymmetric matcher เช่น jasmine.any หรือ jasmine.objectContaining
ก็เปลี่ยนไปใช้ expect.any, expectObjectContaining แทน
อยากดู code coverage
ในตัว jest มี code coverage option มาให้ด้วย คือ — coverage ดังนั้นเราก็แค่เพิ่มเข้าไปใน npm script
“test:coverage”: “jest — coverage”,
พอสั่ง npm run test:coverage มันก็จะแสดง code coverage ออกมาให้ดูด้วยสวยงามเลย
จบ ลองเข้าไปดูของที่ลอง migrate มาแล้วได้ที่ https://github.com/chonla/ng-calculator ใน branch jest
อ้างอิง
- https://www.xfive.co/blog/testing-angular-faster-jest/
- https://facebook.github.io/jest/docs/en/getting-started.html
pingback: http://www.chonla.com/migrate-from-jasmine-to-jest-in-angular-6/