เขียน Test กับ Jest กัน

Photo by Jonathan Borba

เรื่องมันมีอยู่ว่า…ช่วงนี้ผมได้มีโอกาสมาเริ่มเขียนฝั่งหน้าบ้านมากขึ้น(react.js) แล้วต้องมายุ่งกับเรื่องของ Logic ด้วยในบางจุด และหลังจากมีการ code reviews ไป ทีมได้แนะนำว่า ไอ้ส่วนที่เป็นการคำนวณที่มันยุ่งยากซับซ้อนซ่อนเงื่อนเนี่ย เช่น การเขียนฟังก์ชั่นอะไรบางอย่างที่เรา Custom เอง ก็อาจจะต้องมีเทสนะ

ก็เลยลองๆ หาดูว่ามีเครื่องมืออะไรบ้าง ก็มีตัวเลือกที่ทีมได้มีการพูดถึงไว้เช่น Jasmine, Mocha บลาๆ จำไม่ได้

แต่….ผมอยากลอง Jest ดูน่าสนใจดี ก็เลยไปสืืบมา

Star ค่อนข้างสูงงงง

บวกกับเขา เคลมว่า…

Jest is a delightful JavaScript Testing Framework with a focus on simplicity.

It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more!

ก็เลยเอามาลองดู

การลงไม่ยาก

yarn

yarn add --dev jest 

npm

npm install --save-dev jest

จากนั้น สร้างไฟล์ขึ้นมาไฟล์ที่มีฟังก์ชั่นเพื่อมาทดสอบ rectangle.js

function rectangle(a, b) {
  return a * b;
}
module.exports = rectangle;

และสร้างอีกไฟล์เพื่อมาทดสอบฟังก์ชั่นนี้ rectangle.test.js

const rectangle = require('./rectangle');
test('rectangle 4 and 4to equal 16', () => {
   expect(rectangle(4, 4)).toBe(16);
});

เพิ่มไฟล์ scripts ลงใน package.json

{
"scripts": {
  "test": "jest"
 }
}

รันคำสั่ง

yarn test --coverage

และผลที่ได้คือ… เขียวไปดิ !

มี code coverage ด้วย

ซึ่งก็ต้องผ่านอย่างแน่ ยิ่งกว่าแช่แป้ง เพราะเป็นฟังก์ชั่นง่ายๆ หากมีเงื่อนไข หรือ Logic ที่ซับซ้อนมากยิ่งขึ้น ยิ่งต้องการเทส เช่น พวกฟังก์ชั่น async await หรือ มีcomponent หลายๆชั้น ซึ่งเจ้า jest ก็มีรองรับเหมือนกัน

ดูๆไปก็เหมือนจะง่าย แต่ถ้ายิ่งซับซ้อนมากขึ้นก็คงชวนปวดหัวน่าดู เดี๋ยวคงต้องรอดูกันว่าเทสในระดับที่ลึกลงไปอีกจะวุ่นแค่ไหน

ป.ล. ep นี้แสดงให้ดูถึง การเทสแบบธรรมดาก่อน ส่วนการเทสในระดับ component จะพูดถึงใน บทต่อๆไปครับ

ใครสนใจไปดูต่อที่

Jest · 🃏 Delightful JavaScript Testing

สวัสดีครับ…