มาทำ Unit Testing บน Javascript ด้วย Jest ตอนที่ 1 — Intro

โลกของ Developer มักหนีไม่พ้นกับ Bug แต่ทำไม ทุกวันนี้เรายังเวียนว่ายตายเกิดกับ Bug ได้อย่างสุขใจกันอยู่ล่ะ เรามาหนีจากวงโคจรเดิมๆ โดยการทยอยปลดแอก Bug ให้ลดลงด้วยการทำ Unit Test กันดีกว่า!!!

Unit Testing คืออะไร

• อ้างอิงจาก Wiki สรุปง่ายๆคือ ระเบียบวิธีที่ใช้ในการทดสอบส่วนต่างๆของ sourcecode ที่พัฒนา
• คำว่า Unit สื่อถึงการส่วนย่อยๆ ถ้าเปรียบกับ sourcecode ของเราแล้วก็คือ ก้อน Code สักก้อนที่เล็กพอที่สุกที่เป็นไปได้ ไม่ได้มีความเกี่ยวข้องกับชาวบ้าน ชาวช่อง ในที่นี้ก็อาจจะเปรียบได้กับ ฟังก์ชั่น เช่น add(), divide() เป็นต้น
• ลองศึกษาเพิ่มเติมกันดูนะ ในบ้านเราก็มีหลายๆท่านเชี่ยวชาญทีเดียว!!!

ทำไมต้องทำ Unit Test

• เพื่อลดความผิดพลาดที่เกิดกับระบบ (อาจไม่ถึงกับ ฺBug Free นะ)
• เพื่อมากำหนดขอบเขตของความเป็นไปได้ที่จะเกิดขึ้น
• เพื่อเพิ่มความมั่นใจให้กับตัวนักพัฒนาเอง ตลอดจนลูกค้า
• ลด ละ เลิก โรค วัวหายล้อมคอก

เตรียมการทำ Unit Testing บน Javascript ด้วย Jest

• Javascript — เตรียมความรู้พื้นฐานมากันเลย
• NodeJS — Framework สำหรับนักพัฒนา JS
• Jest — Platform จากทาง Facebook ที่ออกตัวแรงว่า มาเพื่อช่วยแก้ปัญหา การทดสอบ JS โดย Motto ระบุไว้เลยว่า “Painless Javascript Testing” หวังว่าไม่ใช่ “Pain more”
• Editor ดีดีสักตัว ตามแต่จะถนัด ในบทความนี้จะใช้ Visual Studio Code

ทำไมต้อง Jest (เจ๊สสสสท) ทำไม?

• อันที่จริงมี Tools ที่ใช้ทำ Unit Testing บน JS มากมาย เช่น MochaJS หรือ Jasmine เป็นต้น (ซึ่งผมยังไม่มีประสบการณ์เท่าไร -_-)
• ป.ล. ผม Bias อยากใช้ของ Facebook เอง เพราะทาง FB เคลมตามรูปว่า
• ข้อเคลมที่ 1: Easy Setup — ใช้ได้ดีกับโปรเจ็กต์ที่พัฒนาด้วย React
• ข้อเคลมที่ 2: Instant Feedback — มันเร็ว
• ข้อเคลมที่ 3: Snapshot Testing — Capture screenshot ให้ด้วย
• ข้อเคลมที่ 4: จั่วหัวตัวอย่างใหญ่ตามรูปด้านล่างว่า “Zero configuration testing platform” แปลว่า หวานล่ะสิไม่ต้องปรับแต่งอะไร แค่เสกก็ใช้ได้สินะ
• ข้อเคลมที่ 5: ทำ Sandbox testing ได้ (ไว้ทดสอบเสร็จจะเอามาเขียนบทความต่อไปนะ)
• ข้อเคลมที่ 6: ฺBuilt-in Code Coverage — ตาลุกวาว ไม่ต้องหา Code Coverage Tools อื่นๆมาเสริม มีในตัวเองเลย
• ข้อเคลมที่ 7: มี Built-in Library ที่ใช้ทำ Mock สำหรับการทดสอบติดมาด้วยเลย
• ข้อเคลมที่ 8: รองรับ Typescript ด้วย — สาวก TypeScript ไม่ต้องน้อยใจนะ

อารัมภบท และอวยไส้แตกกันมาเยอะ มาดูกันดีกว่าว่าของเขาดีจริงไหม ^^

เริ่มลงมือทดสอบกัน

เตรียม Project ทดสอบ

ตั้ง Project JS ด้วย npm แบบง่ายๆกัน

npm init

จากนั้น Enter รัวๆ (ขอไปเน้นที่เรื่องทดสอบเร็วๆ) ท้ายที่สุดจะได้ Directory ที่มีไฟล์ package.json อยู่หนึ่งไฟล์

ถัดมาทำการ Install platform Jest ด้วนคำสั่ง “npm install jest” ดังด้านล่าง

npm install --save-dev jest

จะพบว่า package.json จะมี develop dependencies (เป็น devDependencies เพราะเราจะเอา Jest มาใช้ในระหว่างที่ develop งานเท่านั้นนะ) เอาล่ะถ้าเรียบร้อยควรจะได้หน้าตา package.json ดังรูป

เป็นอันว่า ณ จุดนี้ เราพร้อมละที่จะไปเขียน code และเขียน Unit test กัน เปิด Directory ด้วย VSCode กัน จะได้โครงสร้าง Project ดังรูป

เขียน Code ตัวอย่างเพื่อเอาไปเตรียมทดสอบ

อ้างอิงจาก Doc ของ Jest เขาเขียน Function บวกเลข ในที่นี้เราจะมาเขียน function ที่ใช้ในการหาร (divide) แทนกัน อ่าว…

เริ่มจากทำการ add new file ชื่อว่า “divide.js” โดยภายใน code มีรายละเอียดดังนี้

//divide.js
function divide(a, b) {
  return a / b;
}
module.exports = divide;

เขียนไฟล์ Unit Test ทันที

สร้างไฟล์ชื่อ “divide.test.js” (ล้อมาจาก divide.js ก่อนหน้าของเราเอง) โดยมีรายละเอียดดังนี้

//divide.test.js
const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

และถัดมาเพื่อให้ Project เริ่มทำงานจาก sciript test เรา ไปที่ไฟล์ package.json และปรับ code ส่วน script ดังตัวอย่าง

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

จะได้หน้าตา package.json ดังนี้

{
  "name": "jest-101",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "jest": "^19.0.2"
  }
}

อย่ารีรอ Run ทดสอบเลย

ทดลอง run คำสั่ง “npm test” ได้เลย

npm test

และแล้ว…

โป๊ะเช๊ะ! Fail สิครับ copy ไม่ดูตาม้าตาเรือ… (หวังว่าท่านผู้อ่านคงไม่ได้ copy ตามผมมาด้วยนะ ^^) คือ เขียน function ทดสอบ divide แต่ดัน copy code ของ function จาก Jest ที่ใช้ทดสอบการบวก (sum) มาแทน ดังนั้น เราแค่ย้อนกลับไปปรับ ที่ไฟล์ “divide.test.js” กัน โดยตั้งโจทย์การทดสอบดังนี้

ทดสอบหาร (divide) 1 ด้วย 2 มีค่าเท่ากับ (equal to) 5

การประกาศเราก็จะประกาศ ตามด้านล่างเลย คือใช้ function “test” ซึ่งโดยเราจะคาดหวัง (expect) ให้ ผลของการหาร มีค่าเป็น (to be) 0.5 นั่นเอง

** สังเกตุ syntax ให้ดีๆนะครับ ไว้จะกล่าวถึงอยู่เรื่อยๆ **

// divide.test.js
const divide = require('./divide');

test('divides 1 / 2 to equal 0.5', () => {
  expect(divide(1, 2)).toBe(0.5);
});

มาลอง Run ใหม่อีกครั้ง ดูกัน… ซึ่งก็เรียบร้อยตามภาพประกอบจนได้

สำหรับบทความนี้คงยาวไปละ เดี๋ยวจะหน้าเบื่อก่อน ^^

ตอนถัดไป ตอนที่ 2 จะมาพูดถึงการทำ API Testgin และการใช้งาน Jest ใน Project React กันครับ
“มาทำ Unit Testing บน Javascript ด้วย Jest ตอนที่ 2 — API Testing”

ขอให้เริ่มสนุกกับการเขียน Test … :)

References:

https://facebook.github.io/jest/