在組件開發的過程中,我們常使用單元測試來保證組件不會出問題,因此掌握必要的單元檢測知識也很必要,在前面的構建Ant Design項目時,我們就選用了Jest來進行單元測試,下面就展示單元測試的一個小例子。
首先,我們寫一個計數器----Counter.vue,點擊"加1”按鈕實現數字加1
<template>
<div>
count:{{count}}
<button @click="handleClick">加1</button>
</div>
</template>
<script>
export default {
name: "",
data(){
return{
count:0
}
},
methods:{
handleClick(){
this.count++;
}
}
}
</script>
<style scoped>
</style>
然後在util/test下新建測試文件,名字必須爲xxx.spec.js,我爲了和組件名字統一,就取了Counter.spec.js,首先通過vue-test-utils提供的mount
方法來掛載組件和我們要測試的Counter組件,如下
import { mount } from "@vue/test-utils";
import Count from "@/components/Counter.vue";
我們先生成快照,使用toMatchSnapshot,每一個測試都用it包裹,代碼如下
describe("counterTest", () => {
const wrapper = mount(Count);
it("test", () => {
expect(wrapper.html()).toMatchSnapshot();
});
});
打開package.json,查看測命令,運行npm run test:unit即可生成快照。
然後我們想測試這個按鈕點擊後能否加1,方法是跟蹤按鈕點擊後,count有無變成1,測試代碼如下
describe("counterTest", () => {
const wrapper = mount(Count);
it("count++", () => {
const button = wrapper.find("button");
button.trigger("click");
expect(wrapper.vm.count).toBe(1);
});
});
如果顯示passed,就表明測試成功
如果不想一遍遍的執行命令,可以使用npm run test:unit -- --watch,這樣你修改測試代碼後就會進行測試
我們還可以使用sinon來進行監聽,使用npm i -save-dev sinon來下載安裝,主要是監聽有無change然後測試代碼如下
import { mount } from "@vue/test-utils";
import Count from "@/components/Counter.vue";
import sinon from "sinon";
describe("counterTest", () => {
const change = sinon.spy();
const wrapper = mount(Count, {
listeners: {
change
}
});
it("count++", () => {
const button = wrapper.find("button");
button.trigger("click");
expect(wrapper.vm.count).toBe(1);
expect(change.called).toBe(true);
});
});
如果你想測試點擊兩次,添加如下代碼即可
button.trigger("click");
expect(change.callCount).toBe(2);