使用vue-test測試簡單組件

一: 背景
對前端vue組件進行簡單本地測試

二: 實驗環境

1. vue 2.9.6
2. vue/test-utils 1.0.0 & jest

三: 實驗步驟

1. 安裝 Vue Test Utils
   (1). 克隆倉庫，該倉庫主要提供一個簡單的組件。git clone https://github.com/vuejs/vue-test-utils-getting-started
   (2). 安裝依賴。npm install
   (3). 若是想對本身的組件進行測試的話能夠略過步驟(1)
2. 準備被測試的組件
   (1). 在本次實驗中測試組件內容以下:
   
   
3. 建立測試文件
   (1). 建立一個名爲'__tests__'的文件夾，一般狀況下全部的測試文件都放在__tests__文件下。
   (2). 準備測試文件須要的依賴項。在'__tests__'下建立建立'test.js'，首先在test.js中引入須要測試的組件，其次從'@vue/test-utils'中引入{ createLocalVue, shallowMount }兩個模塊，createLocalVue主要是用來建立被測試組件的本地拷貝，在這份拷貝上安裝插件不會對被測試組件產生影響。在本例中shallowMount也可使用Mount代替，主要做用是建立一個包含被掛載和渲染的Vue組件的包裹器Wrapper，咱們能夠經過Wrapper.vm訪問組件的方法和屬性。再次是引入一些其它的依賴，在本次實驗使用的組件中用到了element-ui，因此要引入element-ui。
   
   (3). 建立一個包裹器，經過一個構造函數返回一個包裹器，方便使用。
   
   其中localValue是使用createLocalVue()生成的本地拷貝，propsData是在組件被掛載時對props的設置，經過組件中的props對象能夠看出本例中props只有visible一個布爾值。sync主時控制組件是否被同步渲染。
   (4). 測試渲染是否符合預期。
   
   首先斷言該組件是不是一個Vue實例，其次是渲染的html是否符合預期。在這個過程當中須要用到選擇器進行dom的選擇及判斷，對於原生的html5來講咱們能夠根據vue-test的官方文檔選擇器部分進行選擇，對於一些ui組件庫好比element-ui，因爲對原生的html作了封裝，因此實際渲染的html可使用wrapper.html()進行查看，咱們會發現wrapper.html()顯示的內容和使用開發者工具進行審查獲得的渲染是有區別的，因此最好根據wrapper.html()進行選擇。
   (5). 測試一些事件是否符合預期。
   
   
   在這個部分對於本例來講咱們主要測試組件的emit的值，也就是是否勾選checkbox與吐出'yes'和'no'的對應關係，經過組件代碼咱們會發現預期的對應關係是checkbox.checked === 'true' -> 'no'，checkbox.checked === 'false' -> 'yes'。setData主要是設置wrapper.vm的屬性，本例中主要是設置form.checked的值，jest.fn()是jest mock中的內容，在本例中主要是mock吐出的getParam方法。
4. 主要踩坑點
   (1). 渲染問題，組件庫和原生的html經過控制檯的開發者工具來看可能只是一些樣式與組成方式的問題，可是經過wrapper.html()來看可能又有不一樣，因此當咱們經過常規的選擇方法選不中所須要的dom時，能夠console一下wrapper.html看一下實際渲染結果
   (2). 事件觸發問題，好比element-ui中對<el-checkbox>提供的@change事件，可是當咱們進行wrapper.trigger('change')時，是觸發不了的。<el-button>的@click()和<button>的@click也是有區別的。
   (3). 仍是要多熟悉文檔，附上vue-test 連接描述和jest 連接描述的地址