Documents my learning experiences

Asynchronous 非同步程式測試 在測試方法時內部可能有 Callbacks 或 Promise 之類可能是非同步情況下，有可能會出現測試通過但報告卻顯示沒有被測試到。 假設有一個被測試檔案中有非同步的函數方法。 // asynchronous.js const Asynchronous = { // 使用 Callbacks 測試的非同步函數 fetchDataWithCallback(callback) { setTimeout(() => { callback('This is a callback'); }, 3000); ... Read More

XMLHttpRequest 如何模擬 在被測試方法中，如果使用到了 XMLHttpRequest 物件來發送 HTTP 請求，因為測試的重點在於方法內部邏輯的實作，所以並不需要在測試中實際發送 HTTP 請求。 假設有一個被測試方法使用到 XMLHttpRequest 物件來發送 HTTP 請求。 const XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest; function fetchData(url, callback) { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.onload = ... Read More

AJAX 方法如何測試 在測試方法內部如果使用了 AJAX 請求，但因為測試的重點在於方法內部邏輯的實作，所以並不需要每次測試都實際呼叫 API。 假設有一個被測試方法使用到 Axios 來發送 AJAX 請求。 // axios.js const axios = require('axios'); async function MockAxios() { try { const response = await axios.get('https://api.example.com/data'); return response.data; } catch (error) { ... Read More

Jest 外部依賴 ＆ 模擬 在 Jest 測試框架中，不具備網頁環境。 對於測試需要用到的 Library ，需要用引入模組的方式使測試能夠正常運作。 而若需要對網頁做 DOM manipulation ，需要用模擬的方式創建 DOM 環境。 ─ 引入模組 若是環境相關的引用可以另外寫一隻 setupTests.js 在裡面做全域宣告（global.）的方式，並在上一篇 Jest Testing - Introduction 中提到的 package.json 裡設定，能夠在執行每個測試檔案前先執行 setupTests.js 做 initial。 Jest 測試框架，需要使用的模組需要透... Read More

Jest 前端測試框架 目前在專案中希望能夠配合 CI/CD，以進行自動化測試。除了對後端進行自動化測試外，也希望能針對前端進行測試。 因此，我寫了一個使用 Jest 框架來建立前端測試環境的專案。未來各專案可以 clone 這份專案，並與 CI/CD 配合進行前端測試的開發。 在這個專案中，順手記錄了一些 Jest 框架應用，以及前端測試可能會用到的方法。 ─ 如何安裝 Jest 系統環境中需要先安裝 Node.js 和 npm。 終端機在你的專案路徑下輸入初始化 npm 的指令。 npm init -y 安裝 Jest n... Read More