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

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

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

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

ตัวอย่าง: การใช้คำล้อเลียนกับเจสต์

สร้างไฟล์ 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