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