การทดสอบ 1 หน่วยของ Chrome ส่วนขยาย

การทดสอบหน่วยช่วยให้ทดสอบโค้ดส่วนเล็กๆ โดยแยกจากส่วนขยายที่เหลือและนอกเบราว์เซอร์ได้ เช่น คุณสามารถเขียนแบบทดสอบ 1 หน่วยเพื่อให้แน่ใจว่าเมธอดตัวช่วยเขียนค่าลงในพื้นที่เก็บข้อมูลได้อย่างถูกต้อง

โค้ดที่เขียนโดยไม่ใช้ API ส่วนขยายจะทดสอบได้ตามปกติ โดยใช้เฟรมเวิร์กอย่างเช่น Jest เพื่อให้ทดสอบโค้ดด้วยวิธีนี้ได้ง่ายขึ้น ลองใช้เทคนิคต่างๆ เช่น การแทรก Dependency ซึ่งช่วยนำทรัพยากร Dependency ของเนมสเปซ Chrome ออกจากการติดตั้งใช้งานระดับล่างได้

หากต้องการทดสอบโค้ดที่มี API ส่วนขยาย ให้ลองใช้การจำลอง

ตัวอย่าง: การใช้โมเดลกับ Jest

สร้างไฟล์ jest.config.js ซึ่งจะประกาศไฟล์การตั้งค่าที่จะทำงานก่อนการทดสอบทั้งหมด ดังนี้

jest.config.js:

module.exports = {
  setupFiles: ['<rootDir>/mock-extension-apis.js']
};

ใน mock-extension-apis.js ให้เพิ่มการติดตั้งใช้งานสำหรับฟังก์ชันที่คุณต้องการเรียกใช้ ดังนี้

mock-extension-apis.js:

global.chrome = {
  tabs: {
    query: async () => { throw new Error("Unimplemented.") };
  }
};

จากนั้นใช้ jest.spy เพื่อจำลองค่าที่แสดงผลในการทดสอบโดยทำดังนี้

test("getActiveTabId returns active tab ID", async () => {
  jest.spyOn(chrome.tabs, "query").mockResolvedValue([{
    id: 3,
    active: true,
    currentWindow: true
  }]);
  expect(await getActiveTabId()).toBe(3);
});

ขั้นตอนถัดไป

เราขอแนะนำให้เพิ่มการทดสอบตั้งแต่ต้นจนจบเพื่อให้มั่นใจว่าส่วนขยายจะทำงานตามที่คาดไว้ ดูบทแนะนำทั้งหมดได้ที่การทดสอบส่วนขยาย Chrome ด้วย Puppeteer