การตั้งค่าสภาพแวดล้อมการทดสอบ

การเขียนการทดสอบสำหรับโค้ด jQuery มีความสำคัญอย่างยิ่งต่อการสร้างแอปพลิเคชันเว็บที่แข็งแกร่งและดูแลรักษาได้ง่าย ช่วยค้นหาข้อบกพร่องได้ตั้งแต่เนิ่น ๆ และรับรองว่าโค้ดทำงานตามที่คาดไว้

• ป้องกันการถดถอย: รับรองว่าการเปลี่ยนแปลงใหม่จะไม่ทำให้ความสามารถเดิมเสียหาย
• ปรับปรุงคุณภาพโค้ด: กระตุ้นให้คุณเขียนโค้ดแบบแยกส่วนที่ทดสอบได้
• อำนวยความสะดวกในการทำงานร่วมกัน: จัดทำเอกสารที่ชัดเจนว่าส่วนประกอบต่าง ๆ ควรทำงานอย่างไร

สำหรับการทดสอบ JavaScript รวมถึง jQuery คุณต้องมีตัวเรียกใช้การทดสอบ เครื่องมือนี้จะเรียกใช้การทดสอบและรายงานผลลัพธ์

ตัวเลือกยอดนิยมมีสองแบบ:

• Jest: กรอบการทดสอบสมัยใหม่จาก Facebook ที่มีความสามารถมากมาย นิยมใช้กับ React แต่เหมาะกับ JS ทุกประเภท
• QUnit: กรอบการทดสอบเฉพาะสำหรับ jQuery ใช้งานง่ายกว่า แต่มีความสามารถน้อยกว่า Jest

ในบทเรียนนี้ เราจะเน้นการตั้งค่า Jest เนื่องจากมีความสามารถครบถ้วนและได้รับการใช้งานอย่างแพร่หลาย

ก่อนติดตั้ง Jest คุณต้องมีโครงการ Node.js ก่อน หากยังไม่มี คุณสามารถสร้างได้อย่างง่ายดาย

ไปยังไดเรกทอรีโครงการในเทอร์มินัล แล้วเรียกใช้:

คำสั่งนี้จะสร้างไฟล์ package.json ซึ่งใช้จัดการส่วนพึ่งพาและสคริปต์ของโครงการ

ตอนนี้มาติดตั้ง Jest กัน เนื่องจาก jQuery มักโต้ตอบกับ DOM ของเบราว์เซอร์ (Document Object Model) เราจึงต้องใช้ jest-environment-jsdom ด้วย JSDOM จัดเตรียมสภาพแวดล้อมที่คล้ายเบราว์เซอร์ใน Node.js ทำให้โค้ด jQuery ของคุณปรับเปลี่ยน DOM เสมือนได้

ติดตั้งเป็นส่วนพึ่งพาสำหรับการพัฒนา:

การดำเนินการนี้จะเพิ่ม Jest และ JSDOM ลงใน package.json

หากต้องการให้ Jest ใช้ JSDOM คุณต้องตั้งค่า โดยเพิ่มสคริปต์ test ลงใน package.json หรือสร้างไฟล์ jest.config.js

ตัวเลือกที่ 1: ใน package.json

{
  "name": "my-jquery-app",
  "version": "1.0.0",
  "scripts": {
    "test": "jest --env=jsdom"
  },
  "devDependencies": {
    "jest": "^29.x.x",
    "jest-environment-jsdom": "^29.x.x"
  }
}

แฟล็ก --env=jsdom จะทำให้ Jest เรียกใช้การทดสอบในสภาพแวดล้อม JSDOM

Jest จะค้นหาไฟล์การทดสอบในไดเรกทอรี __tests__ หรือไฟล์ที่ลงท้ายด้วย .test.js (หรือ .spec.js) มาสร้างไฟล์การทดสอบแบบง่ายกัน

สร้างไดเรกทอรีชื่อ __tests__ ที่รากโครงการ แล้วเพิ่มไฟล์ เช่น __tests__/my-feature.test.js:

// __tests__/my-feature.test.js

describe('My Feature', () => {
  test('should do something basic', () => {
    // Test logic will go here
  });
});

describe ใช้จัดกลุ่มการทดสอบที่เกี่ยวข้องกัน ส่วน test (หรือ it) ใช้กำหนดกรณีทดสอบแต่ละกรณี

หากต้องการทดสอบโค้ด jQuery คุณต้องนำเข้า jQuery ลงในไฟล์การทดสอบ ติดตั้ง jQuery ผ่าน npm ได้ด้วยคำสั่ง: npm install jquery

จากนั้น ในไฟล์การทดสอบของคุณ ให้นำเข้า jQuery ดังนี้:

// __tests__/my-feature.test.js
const $ = require('jquery');

describe('My jQuery Feature', () => {
  // Setup for each test
  beforeEach(() => {
    // Create a fresh DOM element for each test
    document.body.innerHTML = '
Hello
';
  });

  test('should add a class to the element', () => {
    const element = $('#test-element');
    element.addClass('highlight');
    expect(element.hasClass('highlight')).toBe(true);
  });
});

การยืนยันเงื่อนไขคือวิธีตรวจสอบว่าโค้ดทำงานถูกต้องหรือไม่ Jest ใช้ฟังก์ชัน expect() ร่วมกับตัวตรวจสอบเพื่อสร้างการยืนยันเงื่อนไข

ตัวอย่าง JavaScript แบบง่ายมีดังนี้ (ไม่เฉพาะเจาะจงกับ jQuery แต่แสดงให้เห็นการยืนยันเงื่อนไข):

Jest มีตัวตรวจสอบให้เลือกใช้มากมาย ต่อไปนี้คือตัวตรวจสอบที่ใช้บ่อย:

• .toBe(value): ตรวจสอบว่าค่าเท่ากันทุกประการ (เช่น ===)
• .toEqual(value): ตรวจสอบความเท่ากันเชิงลึกของออบเจ็กต์หรืออาร์เรย์
• .not.toBe(value): ตรวจสอบว่าค่าไม่เท่ากัน
• .toBeTruthy() / .toBeFalsy(): ตรวจสอบค่าความจริงหรือความเท็จ
• .toContain(item): ตรวจสอบว่าอาร์เรย์หรือสตริงมีรายการที่ระบุหรือไม่

สำหรับ jQuery คุณมักใช้สิ่งเหล่านี้ร่วมกับเมธอดของ jQuery เช่น expect($element.text()).toBe('Expected Text');

เมื่อตั้งค่าไฟล์การทดสอบแล้ว การเรียกใช้ก็ทำได้ง่าย เพียงใช้สคริปต์ที่กำหนดไว้ใน package.json:

Jest จะค้นหาไฟล์การทดสอบทั้งหมด เรียกใช้ในสภาพแวดล้อม JSDOM และรายงานผลลัพธ์ในเทอร์มินัล โดยจะแสดงว่าการทดสอบใดผ่าน การทดสอบใดล้มเหลว และแสดงรายละเอียดของความล้มเหลวแต่ละรายการ

คุณได้เรียนรู้วิธีตั้งค่าสภาพแวดล้อมสำหรับทดสอบ jQuery โดยใช้ Jest และ JSDOM แล้ว คำสั่งและการกำหนดค่าใดต่อไปนี้จำเป็นสำหรับการตั้งค่า Jest พื้นฐานที่รองรับ DOM

ในบทเรียนนี้ คุณได้เรียนรู้วิธีตั้งค่าสภาพแวดล้อมการทดสอบที่มีประสิทธิภาพสำหรับแอปพลิเคชัน jQuery โดยใช้ Jest

• เราเริ่มต้นโครงการ Node.js ด้วย npm init
• ติดตั้ง Jest และ jest-environment-jsdom เพื่อจำลองสภาพแวดล้อมเบราว์เซอร์
• ตั้งค่า Jest ใน package.json ให้ใช้ JSDOM
• ทำความเข้าใจวิธีจัดโครงสร้างไฟล์การทดสอบ นำเข้า jQuery และเขียนการยืนยันเงื่อนไขพื้นฐานโดยใช้ตัวตรวจสอบของ Jest

พื้นฐานนี้ช่วยให้คุณเขียนการทดสอบที่มีประสิทธิภาพ และทำให้โค้ด jQuery น่าเชื่อถือและดูแลรักษาได้ง่าย