2.2 接入2.2.1安裝
// 小程序工具集
$ npm i --save-dev -
// Jest測試框架
$ npm i --save-dev jest
2.2.2 在.json中, 添加測試相關命令
{sd
...
: {
"test": "jest --"
}
...
}
2.2.3 添加jest..js：
注意 設為 'jsdom'，因為框架使用的是這個環境，如果配錯會運行不起來。
// 更多配置查看： .io/docs/zh-Hans/
. = {
: true,
erns: [
'/dist-wx/',
'//',
],
// 是否開啟自動mock測試文件中導入的文件
: false,
: '',
// 測試文件執行前會先執行該文件，用來給Jest測試函數加代理從而收集測試用例
: ['.//@/dwt/dist/src//.js'],
// 覆蓋率報告依賴
: [
'',
'@/dwt-',
],
// 測試文件匹配規則
: [
'**//**/*.test.ts?(x)',
],
// 測試覆蓋報告文件列表，下面是默認列表
: ['json', 'lcov', 'text', ''],
// 全局變量配置
: {
: 'test',
: {
: {
: {},
},
},
},
: {
'@/(.*)$': '/$1.ts',
},
: ['//wx.ts'],
: {
'^.+\\.[jt]s?$': 'ts-jest',
},
: 'ts-jest',
: 'jsdom',
: true,
: './/',
: ['json-', 'text', 'lcov'],
: [
'//',
],
: {
'^@/(.*)$': '/$1',
},
: {
: {
: 50,
: 50,
lines: 50,
: 50,
},
},
};
2.3 組件測試
示例：如何給一個提現彈窗寫組件測試？
// 自定義組件 JS邏輯
({
: {
: , // 是否展示
title: , // 標題
: , // 確認按鈕文案
: , // 取消按鈕文案
: , // 是否展示取消按鈕
: , // 確認按鈕Style
num: ,
},
: {
ok() {
// 提現邏輯
this.('ok');
},
() {
this.('');
}
}
});
2.3.1 要考慮的事項
1.根據組件傳入的屬性有相對應的DOM表現
傳入不同的屬性值, 其組件產生的內容、結構、樣式變化也是可預計的，例如：
根據屬性值, 判斷按鈕是否展示
title, text, , 文案是否一致
, 的值與實際樣式是否一致
2.響應用戶交互觸發事件
處理用戶操作, 保證事件觸發時, 響應函數如預期，例如：
onOk 當用戶點擊確認按鈕時觸發
當用戶點擊取消按鈕時觸發
2.3.2 實踐2.3.2.1 環境初始化：
path from 'path';
{ load, , } from '-';
('[wx-]', () => {
// ...
}
2.3.2.2 確認組件屬性是否與DOM里的內容、結構、樣式相同：
it('[] 屬性文案渲染正常', () => {
const id = load(path.join(, '../dist-wx///index'));
// comp是渲染后的組件樹
const comp = .(id, {
: true,
title: '請確認提現金額',
num: '0.03',
: '確認提現',
: '取消',
: false,
: '-color: blue;'
});
// 組件樹提供，支持class查詢
const title = comp.('.main-title');
const okBtn = comp.('.ok-btn');
const = comp.('.-btn');
// 內容檢測斷言
// , 檢測內容中是否包含預期內容
(title.).('請確認提現金額');
(okBtn.).('確認提現');
(.).('取消');
// 結構檢測斷言
// 判斷取消按鈕是否按預期不存在
().();
// 樣式檢測斷言
// 判斷確認按鈕樣式是否按預期是藍色
(.(okBtn.dom).).toBe('blue');
});
支持以下查找節點的方式：
1.ID 選擇器：#the-id
2.class 選擇器（可以連續指定多個）：.a-class.-class
3.子元素選擇器：.the- > .the-child
4.后代選擇器：.the- .the-
5.跨自定義組件的后代選擇器：.the- >>> .the-
6.多選擇器的并集：#a-node, .some-other-nodes
2.3.2.3 確認用戶操作是否正確響應：
要感知事件是否響應，我們需要使用spyOn方法。該方法和sinon.spy一樣，生成函數的“間諜”，可以斷言該函數的已調用次數、調用入參、調用返回等是否符合預期。
it('[]btn event', async () => {
const comp = .(id, {
: true,
title: '請確認提現金額',
: '確認提現',
num: '0.03',
: '',
: true
});
// 分別監控 ok, , 函數
const spyOk = jest.spyOn(comp.,"");;
const = jest.spyOn(comp., '');
const = jest.spyOn(comp., '');
const ok = comp.('.ok-btn');
const = comp.('.-btn');
const mask = comp.('.-mask');
// 觸發確認按鈕的tap事件
ok.('tap');
// 觸發取消按鈕的tap事件
.('tap');
// 觸發mask的tao事件
mask.('tap');
// 模擬異步回調
await .sleep(200);
// 斷言監控到的結果
(spyOk).();
().();
().();
});
頁面本質上是特殊的組件，因此組件測試的方法也適用于頁面測試。只是在調用方法的時候需要改為頁面的方法，例如對于加載完事件，組件調用ready，頁面調用。
2.3.3 完整的斷言方法
2.3.4 模擬數據mock
當被測方法包含環境因素不能直接測試時，例如使用了，又或者被測方法調用了接口，不希望測試時調用接口影響業務或降低測試速度，可以通過mock來模擬數據。
模擬接口調用示例：
// 被測代碼A
axios from 'axios'
() {
axios.get('/api').then(res => res.data)
}
// 測試代碼B
axios from 'axios';
jest.mock('axios');
// 模擬一次接收到的數據
axios.get.e({
data: '123'
})
const data1 = await ()
(data1).toBe('123')
模擬調用示例1：
// 擴展 wx. 方法
.(
"", //API 名稱
{ key: `` }, //API 參數
{ data: {} } //API 返回結果
);
模擬 調用示例2：
const = {
get: jest.fn(),
set: jest.fn(),
: jest.fn(),
};
jest.mock('../src/.js', () => );
.get.ce(() => JSON.({
value,
: new Date('2030-1-1').(),
}));
它們是怎么mock方法的呢？其實是在mock的時候，就將這個方法放在cache中，當其他地方要方法時，會先查看cache中有沒有該方法，如果我們有mock了，他就使用mock的方法了。如果cache中沒有該方法，再使用正常的方式。
可以看看以下簡化的原理：
const jest = {
mock(, = {}) {
const path = .(, { paths: ["."] });
.cache[path] = {
id: path,
: path,
: true,
: ,
};
},
};
const jest = {
fn(impl = () => {}) {
const = (...args) => {
.mock.calls.push(args);
impl(...args);
};
. = impl;
.mock = { calls: [] };
;
},
};
2.3.5 更多組件測試方法
調用組件實例的 方法：
comp.({ text: 'a' }, () => {})
觸發組件實例的生命周期鉤子：
comp.('ready')
擴展 ()的返回結果小程序可以使用哪些選擇器，當組件中需要使用全局數據時，可通過該方式進行 mock：
const = ("../app.data.json");
.();
擴展 ()的返回結果，當組件中需要使用頁面棧數據時，可通過該方式進行 mock：
.(["pages/index/index.html"]);
模擬元素滾動：
.(comp, 100, 15) // 縱向滾動到 為 100 的位置，期間會觸發 15 次 事件
獲取符合給定匹配串的所有節點，返回 實例列表：
const = comp.('.a')
3. 覆蓋率3.1 覆蓋率包括
1.行覆蓋率（line ）：是否每一行都執行了？
2.函數覆蓋率（ ）：是否每個函數都調用了？
3.分支覆蓋率（ ）：是否每個if代碼塊都執行了？
4.語句覆蓋率（ ）：是否每個語句都執行了？
3.2覆蓋率檢測原理
插樁代碼進行采集。
3.3 覆蓋率報告
使用“jest --”進行覆蓋率測試時，會在項目里生成覆蓋率報告：
給人看的：
報告示例：
4. 踩坑日志：
4.1 load的id為null 、組件
load的路徑必須為dist后的文件
4.2 s-- Got a .js file to while is not set to true (file: /dist-wx//game-/index.js).
.ts添加：
"": true,
4.3 find 'path' / '' or its type .
安裝 @types/node
.ts添加：
"": [
"/@types/node",
],
4.4 '"path"' can only be - using the '' flag
.ts添加：
"": true,
4.5 找不到名稱 ""
.ts添加：
"lib": ["dom"],
4.6 解決小程序編譯與單測運行的類型定義重復問題： block- ''
因為小程序編譯時需要wx庫小程序可以使用哪些選擇器，單測時需要node庫，他們有一些相同的變量聲明。解決辦法：
.ts加上：
"": true,
5. 實驗性測試：小程序真機測試5.1 使用框架
-
5.2 框架功能
1.操作 IDE（如打開開發者工具、打開小程序、關閉開發者工具、關閉小程序等）
2.調用小程序 API （如 、 等）
3.mock 小程序 api 調用結果
4.（向邏輯層注入代碼片段并返回執行結果）
5.對頁面元素進行操作（如 獲取元素、獲取屬性、滑動 等）
5.3 簡要流程
5.4 詳細流程
關于騰訊
騰訊是由騰訊官方推出的一站式品質開放平臺。十余年品質管理經驗，致力于質量標準建設、產品質量提升。騰訊為移動開發者提供兼容性測試、云真機、性能測試、安全防護等優秀研發工具，為百余行業提供解決方案，覆蓋產品在研發、運營各階段的測試需求，歷經千款產品磨礪。金牌專家團隊，通過5大維度，41項指標，360度保障您的產品質量。