Vue學習(5)使用單元測試

在組件開發的過程中，我們常使用單元測試來保證組件不會出問題，因此掌握必要的單元檢測知識也很必要，在前面的構建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);