此篇要教各位如何去撰寫前端的測試流程，測試在CI/CD流程內是不可或缺的一環
例如下方的pipeline圖
開始前先來了解一下主要會使用到的元件
- jest-environment-jsdom：一般也指測試的執行環境（environment），目的是模擬瀏覽器的行為、API，讓開發者能在 Node.js 的環境下模擬瀏覽器的操作
- jest：是一個用來執行 JavaScript 測試的框架（JavaScript Test Framework），又稱 test runner，它讓開發者能夠執行測試、撰寫斷言，提供的 API 像是 expect、describe、test、toBe、toEqual 等等。其他這類的 JS testing frameworks 如 Vitest、mochajs、Jasmine 等等
- @testing-library/jest-dom：原本 Jest 就有提供許多不同的 matchers（例如，toBe()、toEqual()等等），@testing-library/jest-dom則是擴充了更多可以在 Jest 中使用的 matchers，讓開發者可以使用toBeInTheDocument()` 等這類和 DOM 有關的 matchers。
- @testing-library/react：基於 @testing-library/dom，它讓開發者可以把 React 元件 render 到 DOM 上，像是 render、screen、rerender、unmount 等等。不需要搭配 Jest 才能使用。其他這類的工具如 Enzyme。
- @testing-library/user-event：模擬使用者的操作來測試使用者與 UI 的互動。相較於 @testing-library/dom 中的 fireEvent 更能模擬使用者的行為。
- @babel/plugin-transform-modules-commonjs：ESM轉譯成CJS的套件，如果有使用到第三方套件則必須載入。
了解套件後就可以開始設定專案
先安裝套件，可透過以下語法安裝
npm i -D jest @types/jest ts-node ts-jest @testing-library/react @testing-library/user-event @testing-library/jest-dom jest-environment-jsdom
再來於package.json內新增指令，
{
...
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview",
"test" : "jest" <--正常用Vite新建專案就會預設有這行指令
},
...
}
透過Terminal輸入以下指令
npm run test
再來將要測試的Component載入(app.tsx)
如果之前沒建立過test檔案，正常會出現以下錯誤
在app.tsx旁新增一個app.test.tsx檔案，接著將以下指令新增至該tsx檔案裡
import { render, screen } from "@testing-library/react";
import App from "../App";
test("測試 App.tsx 頁面是否正常運作", async () => {
render(<App />);
expect(true).toBeTruthy();
});
再輸入一次測試指令
npm run test
就可以看到Terminal出現成功的畫面
import App from "../App";
test("測試 App.tsx 頁面是否正常運作", () => {
expect(true).toBeTruthy();
});
輸入測試指令會發現Terminal噴了許多錯誤訊息，這是因為app.tsx使用了非原生javascript的語法，又或是 Jest 尚未支援某語法就會出現此錯誤，而 Jest 提供了 5 種方法來解決這個錯誤，我們選擇第 4 種，使用 transform 來解決此問題。
在專案根目錄新增一個檔案，名為 jest.config.ts，並將以下程式碼貼上
export default {
preset: 'ts-jest',
testEnvironment: "jsdom",
transform: {
'\\.m?jsx?$': [
'babel-jest',
{
plugins: [
'@babel/plugin-transform-modules-commonjs'
]
}
],
'\\.tsx?$': 'ts-jest'
},
transformIgnorePatterns: [
// for cross platform
`node_modules\\${path.sep}(?!(pupa|escape-goat))`
]
};
以上設定內有幾個重點
- 把 tsx 結尾的檔案，使用 ts-node 的 ts-jest 來處理。
- 如有使用第三方套件(ex.pupa、excapegoat,etc.)，則需要使用transformIgnorePatterns來避免原先預設node_modules不處理的情況，並且使用@babel/plugin-transform-modules-commonjs來讓ESM轉譯成CJS，讓jest看得懂。
設定好再輸入一次測試指令，就可以看到Terminal顯示成功畫面
也可透過user.click、toBe("")之類的語法進行規劃好的測試，這網路上有許多文章教學，就不另外再撰寫。
參考文章：
沒有留言:
張貼留言