前言
記一次前端vue3的單元測驗之Hello world，滿足一下自己的晚期強迫癥需求，
Note：本次環境為
vue3 + typescript，使用jest作為測驗工具，似乎和vite沒啥關系，
文章目錄
- 前言
- 1. 安裝單元測驗必要軟體包
- 2. 撰寫`babel.config.cjs`檔案
- 3. 根目錄創建tests檔案夾
- 4. 創建`helloworld.test.ts` 測驗檔案
- 5.在`package.json`檔案中添加`script`
- 6. 終端運行
- 7. 結束語
1. 安裝單元測驗必要軟體包
npm install -D babel jest @vue/test-utils @babel/preset-env @babel/preset-typescript @types/jest
2. 撰寫babel.config.cjs檔案
檔案路徑為
/專案根路徑，.cjs指定commonJs規范檔案后綴
// babel.config.cjs
module.exports = {
presets: [
["@babel/preset-env", { targets: { node: "current" } }],
"@babel/preset-typescript"
]
}
3. 根目錄創建tests檔案夾
ts測驗檔案指定后綴為
.test.ts或.spec.ts
4. 創建helloworld.test.ts 測驗檔案
跟著vue3的官方單元測驗get starting創建hello world測驗檔案
/**
* @jest-environment jsdom
*/
// 上方注釋是指定測驗環境，否則報錯document is not define
import { mount } from '@vue/test-utils'
const MessageComponent = {
template: '<p>{{ msg }}</p>',
props: ['msg']
}
test('displays message', () => {
const wrapper = mount(MessageComponent, {
props: {
msg: 'Hello world'
}
})
// Assert the rendered text of the component
expect(wrapper.text()).toContain('Hello world')
})
5.在package.json檔案中添加script
{
"script":{
"test": "jest"
}
}
6. 終端運行
npm run test
# 運行結果
PASS tests/helloworld.spec.ts
√ displays message (20 ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 1.257 s
Ran all test suites.
7. 結束語
單元測驗在一個小專案里看起來不重要，當工程愈來愈大時，單元測驗的優勢凸顯而出，
hello world之后，接著研究jest vue/test-utils 檔案，博客快餐永遠是快餐，沒有自己精心熬的粥好，
祝君學習愉快！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/323401.html
標籤：其他
上一篇：last_name
下一篇：haproxy 負載均衡