原始的單元測試寫法轉(zhuǎn)換到Vue CLI 3集成的單元測試；
發(fā)現(xiàn)vue提供了一些方便的方法如mount()掛載組件得到一個wrapper包裹器。wrapper包裹器提供一些方便的方法。相比之前省事多了，這里做記錄，代碼中有注釋！

import { expect } from 'chai';
import { mount } from '@vue/test-utils';
import Button from '@/components/button/button.vue';

describe('Button.vue', () => {
  // 現(xiàn)在掛載組件，你便得到了這個包裹器
  // 包裹器的作用是Vue為其添加了方便的方法
  // 也可以通過wrapper.vm獲取實例進(jìn)行原生操作
  // 具體文檔：https://vue-test-utils.vuejs.org/zh/api/wrapper/#%E5%B1%9E%E6%80%A7
  const wrapper = mount(Button);

  it('可以禁用button', () => {
    const disabled = true;
    wrapper.setProps({ disabled });
    // 寫法一
    // 從包裹器wrapper解構(gòu)得到實例vm
    const { vm } = wrapper;
    // 通過實例的方法getAttribute()獲取對應(yīng)的屬性
    // 通過實例的方法我們可以進(jìn)行原生js的dom操作獲取想要的屬性
    expect(vm.$el.getAttribute('disabled')).to.eq('disabled');

    // 寫法二
    // Vue直接在包裹器wrapper上定義了一些方便的方法如：attributes()
    // expect(wrapper.attributes('disabled')).to.eq('disabled');
  });
  it('正確添加icon', () => {
    const icon = 'settings';
    wrapper.setProps({ icon });
    // 選中子組件
    const useElement = wrapper.find('use');
    expect(useElement.attributes('href')).to.eq(`#i-${icon}`);
  });
});