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

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

โค้ดที่เขียนโดยไม่ใช้ API ส่วนขยายสามารถทดสอบได้ตามปกติ โดยใช้เฟรมเวิร์กอย่างเช่น Jest หากต้องการทำให้การทดสอบโค้ดด้วยวิธีนี้ง่ายขึ้น ให้ลองใช้เทคนิคต่างๆ เช่น Dependency Injection ซึ่งจะช่วยนำการพึ่งพาเนมสเปซ 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