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