測試(前端)

測試範圍

範圍越大，則開發、執行成本和不穩定度也會越高

測試獎盃模型

更重視使用者視點的想法

視覺回歸測試

靜態測試

單元測試

整合測試

端對端測試

視覺回歸測試

整合測試範例

Testing Library + Jest

1. 取得元素

const addButton = await screen.findByRole('button');

get | find | query

All | (x)

By + Role | LabelText | PlaceholderText | Text | DisplayValue | AltText | Title | TestId

應該優先的元素

WAI-ARIA Roles

label

placeholder

text

2. 進行操作

userEvent.click([元素])

userEvent.type([元素], "輸入文字")

3. 驗證結果

元素是否存在

const addButton = await screen.findByRole('button', { name: '新增' });

元素是否消失

code:javascript

const addButton = await screen.findByRole('button', { name: '新增' });

expect(addButton).toBeNull();

元素數量是否正確

code:javascript

const addButton = await screen.findByRole('listItem',);

expect(nameList.length).toBe(3);

連線測試

mock service worker

工具