99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

本篇文章給大家分享的是有關(guān)如何在Jest中使用Vue-test-utils，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

介紹

Vue-test-utils是Vue的官方的單元測試框架，它提供了一系列非常方便的工具，使我們更加輕松的為Vue構(gòu)建的應(yīng)用來編寫單元測試。主流的 JavaScript 測試運行器有很多，但 Vue Test Utils 都能夠支持。它是測試運行器無關(guān)的。

Jest，是由Facebook開發(fā)的單元測試框架，也是Vue推薦的測試運行器之一。Vue對它的評價是：

Jest 是功能最全的測試運行器。它所需的配置是最少的，默認安裝了 JSDOM，內(nèi)置斷言且命令行的用戶體驗非常好。不過你需要一個能夠?qū)挝募M件導(dǎo)入到測試中的預(yù)處理器。我們已經(jīng)創(chuàng)建了 vue-jest 預(yù)處理器來處理最常見的單文件組件特性，但仍不是 vue-loader 100% 的功能。

我認為可以這樣理解，Vue-test-utils在Vue和Jest之前提供了一個橋梁，暴露出一些接口，讓我們更加方便的通過Jest為Vue應(yīng)用編寫單元測試。

安裝

通過Vue-cli創(chuàng)造模板腳手架時，可以選擇是否啟用單元測試，并且選擇單元測試框架，這樣Vue就幫助我們自動配置好了Jest。

如果是后期添加單元測試的話，首先要安裝Jest和Vue Test Utils：

npm install --save-dev jest @vue/test-utils

然后在package.json中定義一個單元測試的腳本。

// package.json
{
 "scripts": {
  "test": "jest"
 }
}

為了告訴Jest如何處理*.vue文件，需要安裝和配置vue-jest預(yù)處理器：

npm install --save-dev vue-jest

接下來在jest.conf.js配置文件中進行配置：

module.exports = {
 moduleFileExtensions: ['js', 'json', 'vue'],
 moduleNameMapper: {
  '^@/(.*)$': '/src/$1'
 },
 transform: {
  '^.+\\.js$': '/node_modules/babel-jest',
  '.*\\.(vue)$': '/node_modules/vue-jest'
 },
}

其他的具體的配置可以參考官方文檔。

配置好了之后，就可以開始編寫單元測試了。

import { mount } from '@vue/test-utils'
import Component from './component'

describe('Component', () => {
 test('是一個 Vue 實例', () => {
  const wrapper = mount(Component)
  expect(wrapper.isVueInstance()).toBeTruthy()
 })
})

上面的例子中，就是通過vue-test-utils提供的mount方法來掛載組件，創(chuàng)建包裹器和Vue實例

如果不使用vue-test-utils也是可以掛載組件的：

import Vue from 'vue';
import Test1 from '@/components/Test1';

const Constructor = Vue.extend(HelloWorld);
const vm = new Constructor().$mount();

啟用單元測試的命令：

npm run unit

可以在后面加上-- --watch啟動監(jiān)聽模式

別名配置

使用別名在Vue中很常見，可以讓我們避免使用復(fù)雜、易錯的相對路徑：

import Page from '@/components/Test5/Test5'

上面的@就是別名，在使用Vue-cli搭建的項目中，默認已經(jīng)在webpack.base.conf.js中對@進行了配置：

module.exports = {
 ...
 resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
   'vue$': 'vue/dist/vue.esm.js',
   '@': path.join(__dirname, '..', 'src')
  }
 },
}

同樣，使用Jest時也需要在Jest的配置文件jest.conf.js中進行配置

"jest": {
 "moduleNameMapper": {
  '^@/(.*)$': "/src/$1",
 },
...

Shallow Rendering

創(chuàng)建一個App.vue：

然后創(chuàng)建一個Test1組件

針對App.vue編寫單元測試文件App.spec.js

// 從測試實用工具集中導(dǎo)入 `mount()` 方法
import { mount } from 'vue-test-utils';
// 導(dǎo)入你要測試的組件
import App from '@/App';

describe('App.test.js', () => {
 let wrapper,
  vm;

 beforeEach(() => {
  wrapper = mount(App);
  vm = wrapper.vm;
  wrapper.setProps({ messages: ['Cat'] })
 });

 it('equals messages to ["Cat"]', () => {
  expect(vm.messages).toEqual(['Cat'])
 });

 // 為App的單元測試增加快照（snapshot）：
 it('has the expected html structure', () => {
  expect(vm.$el).toMatchSnapshot()
 })
});

執(zhí)行單元測試后，測試通過，然后Jest會在test/__snapshots__/文件夾下創(chuàng)建一個快照文件App.spec.js.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`App.test.js has the expected html structure 1`] = `

 

  

   Cat
  
 

`;

通過快照我們可以發(fā)現(xiàn)，子組件Test1被渲染到App中了。

這里面有一個問題：單元測試應(yīng)該以獨立的單位進行。也就是說，當(dāng)我們測試App時，不需要也不應(yīng)該關(guān)注其子組件的情況。這樣才能保證單元測試的獨立性。比如，在created鉤子函數(shù)中進行的操作就會給測試帶來不確定的問題。

為了解決這個問題，Vue-test-utils提供了shallow方法，它和mount一樣，創(chuàng)建一個包含被掛載和渲染的Vue組件的Wrapper，不同的創(chuàng)建的是被存根的子組件。

這個方法可以保證你關(guān)心的組件在渲染時沒有同時將其子組件渲染，避免了子組件可能帶來的副作用（比如Http請求等）

所以，將App.spec.js中的mount方法更改為shallow方法，再次查看快照

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`App.test.js has the expected html structure 1`] = `

 

`;

可以看出來，子組件沒有被渲染，這時候針對App.vue的單元測試就從組件樹中被完全隔離了。??

測試DOM結(jié)構(gòu)

通過mount、shallow、find、findAll方法都可以返回一個包裹器對象，包裹器會暴露很多封裝、遍歷和查詢其內(nèi)部的Vue組件實例的便捷的方法。

其中，find和findAll方法都可以都接受一個選擇器作為參數(shù)，find方法返回匹配選擇器的DOM節(jié)點或Vue組件的Wrapper，findAll方法返回所有匹配選擇器的DOM節(jié)點或Vue組件的Wrappers的WrapperArray。

一個選擇器可以是一個CSS選擇器、一個Vue組件或是一個查找選項對象。

CSS選擇器：可以匹配任何有效的CSS選擇器

• 標簽選擇器 (div、foo、bar)

• 類選擇器 (.foo、.bar)

• 特性選擇器 ([foo]、[foo="bar"])

• id 選擇器 (#foo、#bar)

• 偽選擇器 (div:first-of-type)

• 符合選擇器（div > #bar > .foo、div + .foo)

Vue組件：Vue 組件也是有效的選擇器。

查找選項對象：

• Name：可以根據(jù)一個組件的name選擇元素。wrapper.find({ name: 'my-button' })

• Ref：可以根據(jù)$ref選擇元素。wrapper.find({ ref: 'myButton' })

這樣我們就可以對DOM的結(jié)構(gòu)進行驗證：

describe('Test for Test1 Component', () => {
 let wrapper,
  vm;

 beforeEach(() => {
  // wrapper = mount(App);
  wrapper = shallow(Test1, {
   propsData: {
    messages: ['bye']
   }
  });
 });

 it('is a Test1 component', () => {
  // 使用Vue組件選擇器
  expect(wrapper.is(Test1)).toBe(true);
  // 使用CSS選擇器
  expect(wrapper.is('.outer')).toBe(true);
  // 使用CSS選擇器
  expect(wrapper.contains('p')).toBe(true)
 });
});

還可以進行一步對DOM結(jié)構(gòu)進行更細致的驗證：

// exists()：斷言 Wrapper 或 WrapperArray 是否存在。
it('不存在img', () = > {
 expect(wrapper.findAll('img').exists()).toBeFalsy()
});

// isEmpty()：斷言 Wrapper 并不包含子節(jié)點。
it('MyButton組件不為空', () = > {
 expect(wrapper.find(MyButton).isEmpty()).toBeFalsy()
});

// attributes()：返回 Wrapper DOM 節(jié)點的特性對象
// classes()：返回 Wrapper DOM 節(jié)點的 class 組成的數(shù)組
it('MyButton組件有my-class類', () = > {
 expect(wrapper.find(MyButton).attributes().class).toContain('my-button');
 expect(wrapper.find(MyButton).classes()).toContain('my-button');
})

測試樣式

UI的樣式測試為了測試我們的樣式是否復(fù)合設(shè)計稿預(yù)期。同時通過樣式測試我們可以感受當(dāng)我們code變化帶來的UI變化，以及是否符合預(yù)期。

inline style ：如果樣式是inline style，可以使用hasStyle來驗證，也可以使用Jest的Snapshot Testing最方便。

// hasStyle：判斷是否有對應(yīng)的內(nèi)聯(lián)樣式
it('MyButton組件有my-class類', () = > {
  expect(wrapper.find(MyButton).hasStyle('padding-top', '10')).toBeTruthy()
})

CSS：屬于E2E測試，把整個系統(tǒng)當(dāng)作一個黑盒，只有UI會暴露給用戶用來測試一個應(yīng)用從頭到尾的流程是否和設(shè)計時候所想的一樣 。有專門的E2E測試框架。比較流行的E2E測試框架有nightwatch等，關(guān)于E2E測試框架的介紹可以參考這篇文章。

測試Props

父組件向子組件傳遞數(shù)據(jù)使用Props，而子組件向父組件傳遞數(shù)據(jù)則需要在子組件出發(fā)父組件的自定義事件

當(dāng)測試對父組件向子組件傳遞數(shù)據(jù)這一行為時，我們想要測試的當(dāng)我們傳遞給子組件一個特定的參數(shù)，子組件是否會按照我們所斷言的那樣變現(xiàn)。

在初始化時向子組件傳值，使用的方法是propsData。

const wrapper = mount(Foo, {
 propsData: {
  foo: 'bar'
 }
})

也可以使用setProps方法：

const wrapper = mount(Foo)
wrapper.setProps({ foo: 'bar' })

我們傳遞給Test1組件的messages一個['bye']數(shù)組，來驗證是否存在：

beforeEach(() = > {
 wrapper = mount(Test1, {
  propsData: {
   messages: ['bye']
  }
 });
});

// props：返回 Wrapper vm 的 props 對象。
it('接收到了bye作為Props', () = > {
 expect(wrapper.props().messages).toContain('bye')
});

有時候會對Props的Type、默認值或者通過validator對Prop進行自定義的驗證

props: {
 messages: {
  type: Array,
  required: true,
  validator: (messages) = > messages.length > 1,
  default () {
   return [0, 2]
  }
 }
},

通過Vue實例的$options獲取包括Props在內(nèi)的初始化選項：

// vm.$options返回Vue實例的初始化選項
describe('驗證Props的各個屬性', () = > {
 wrapper = mount(Test1, {
  propsData: {
   messages: ['bye', 'bye', 'bye']
  }
 });
 const messages = wrapper.vm.$options.props.messages;
 it('messages is of type array', () = > {
  expect(messages.type).toBe(Array)
 });
 it('messages is required', () = > {
  expect(messages.required).toBeTruthy()
 });
 it('messages has at least length 2', () = > {
  expect(messages.validator && messages.validator(['a'])).toBeFalsy();
  expect(messages.validator && messages.validator(['a', 'a'])).toBeTruthy();
 });
 wrapper.destroy()
});

測試自定義事件

自定義事件要測試點至少有以下兩個：

• 測試事件會被正常觸發(fā)

• 測試事件被觸發(fā)后的后續(xù)行為符合預(yù)期

具體到Test1組件和MyButton組件來看：

TEST1組件:

// TEST1


// 省略一些代碼

methods: {
 addCounter(value) {
  this.count = value
 }
},

MyButton組件：

Click {{buttonValue}} {{innerCount}}、

// 省略一些代碼

data() {
 return {
  innerCount: 0
 }
},
computed: {},
methods: {
 increment() {
  this.innerCount += 1;
  this.$emit('add', this.innerCount)
 }
},

要測試的目的是：

1. 當(dāng)MyButton組件的按鈕被點擊后會觸發(fā)increment事件
2. 點擊事件發(fā)生后，Test1組件的addCounter函數(shù)會被觸發(fā)并且結(jié)果符合預(yù)期（及數(shù)字遞增）

首先為MyButton編寫單元測試文件：

describe('Test for MyButton Component', () => {
 const wrapper = mount(MyButton);

 it('calls increment when click on button', () => {
  // 創(chuàng)建mock函數(shù)
  const mockFn = jest.fn();
  // 設(shè)置 Wrapper vm 的方法并強制更新。
  wrapper.setMethods({
   increment: mockFn
  });
  // 觸發(fā)按鈕的點擊事件
  wrapper.find('button').trigger('click');
  expect(mockFn).toBeCalled();
  expect(mockFn).toHaveBeenCalledTimes(1)
 })
});

通過setMethods方法用mock函數(shù)代替真實的方法，然后就可以斷言點擊按鈕后對應(yīng)的方法有沒有被觸發(fā)、觸發(fā)幾次、傳入的參數(shù)等等。

現(xiàn)在我們測試了點擊事件后能觸發(fā)對應(yīng)的方法，下面要測試的就是increment方法將觸發(fā)Test1組件中自定義的add方法

// increment方法會觸發(fā)add方法
it('triggers a addCounter event when a handleClick method is called', () = > {
 const wrapper = mount(MyButton);

 // mock自定義事件
 const mockFn1 = jest.fn();
 wrapper.vm.$on('add', mockFn1);

 // 觸發(fā)按鈕的點擊事件
 wrapper.find('button').trigger('click');
 expect(mockFn1).toBeCalled();
 expect(mockFn1).toHaveBeenCalledWith(1);

 // 再次觸發(fā)按鈕的點擊事件
 wrapper.find('button').trigger('click');
 expect(mockFn1).toHaveBeenCalledTimes(2);
 expect(mockFn1).toHaveBeenCalledWith(2);
})

這里使用了$on方法，將Test1自定義的add事件替換為Mock函數(shù)

對于自定義事件，不能使用trigger方法觸發(fā)，因為trigger只是用DOM事件。自定義事件使用$emit觸發(fā)，前提是通過find找到MyButton組件

// $emit 觸發(fā)自定義事件
describe('驗證addCounter是否被觸發(fā)', () = > {
 wrapper = mount(Test1);
 it('addCounter Fn should be called', () = > {
  const mockFn = jest.fn();
  wrapper.setMethods({
   'addCounter': mockFn
  });
  wrapper.find(MyButton).vm.$emit('add', 100);
  expect(mockFn).toHaveBeenCalledTimes(1);
 });
 wrapper.destroy()
});

測試計算屬性

創(chuàng)建Test2組件，實現(xiàn)功能是使用計算屬性將輸入框輸入的字符翻轉(zhuǎn)：

 .wrapper {
  width: 300px;
  margin: 0 auto;
  text-align: left;
 }

在Test2.spec.js中，可以通過wrapper.vm屬性訪問一個實例所有的方法和屬性。這只存在于 Vue 組件包裹器中。

describe('Test for Test2 Component', () => {
 let wrapper;

 beforeEach(() => {
  wrapper = shallow(Test2);
 });

 afterEach(() => {
  wrapper.destroy()
 });

 it('returns the string in normal order if reversed property is not true', () => {
  wrapper.setProps({needReverse: false});
  wrapper.vm.inputValue = 'ok';
  expect(wrapper.vm.outputValue).toBe('ok')
 });

 it('returns the string in normal order if reversed property is not provided', () => {
  wrapper.vm.inputValue = 'ok';
  expect(wrapper.vm.outputValue).toBe('ok')
 });

 it('returns the string in reversed order if reversed property is true', () => {
  wrapper.setProps({needReverse: true});
  wrapper.vm.inputValue = 'ok';
  expect(wrapper.vm.outputValue).toBe('ko')
 })

});

測試監(jiān)聽器

Vue提供的watch選項提供了一個更通用的方法，來響應(yīng)數(shù)據(jù)的變化。

為Test添加偵聽器：

watch: {
 inputValue: function(newValue, oldValue) {
  if (newValue.trim().length > 0 && newValue !== oldValue) {
   this.printNewValue(newValue)
  }
 }
},
methods: {
 printNewValue(value) {
  console.log(value)
 }
},

為了測試，首先開始測試前將console的log方法用jest的spyOn方法mock掉，最好在測試結(jié)束后通過mockClear方法將其重置，避免無關(guān)狀態(tài)的引入。

describe('Test watch', () = > {
  let spy;
  beforeEach(() = > {
   wrapper = shallow(Test2);
   spy = jest.spyOn(console, 'log')
  });
  afterEach(() = > {
   wrapper.destroy();
   spy.mockClear()
  });
}

然后執(zhí)行給inputValue賦值，按照預(yù)期，spy方法會被調(diào)用

it('is called with the new value in other cases', () = > {
 wrapper.vm.inputValue = 'ok';
 expect(spy).toBeCalled()
});

但是在執(zhí)行之后我們發(fā)現(xiàn)并非如此，spy并未被調(diào)用，原因是：

watch中的方法被Vue**推遲**到了更新的下一個循環(huán)隊列中去異步執(zhí)行，如果這個watch被觸發(fā)多次，只會被推送到隊列一次。這種緩沖行為可以有效的去掉重復(fù)數(shù)據(jù)造成的不必要的性能開銷。

所以當(dāng)我們設(shè)置了inputValue為'ok'之后，watch中的方法并沒有立刻執(zhí)行，但是expect卻執(zhí)行了，所以斷言失敗了。

解決方法就是將斷言放到$nextTick中，在下一個循環(huán)隊列中執(zhí)行，同時在expect后面執(zhí)行Jest提供的done()方法，Jest會等到done()方法被執(zhí)行才會結(jié)束測試。

it('is called with the new value in other cases', (done) = > {
 wrapper.vm.inputValue = 'ok';
 wrapper.vm.$nextTick(() = > {
  expect(spy).toBeCalled();
  done()
 })
});

在測試第二個情況時，由于對inputValue賦值時spy會被執(zhí)行一次，所以需要清除spy的狀態(tài)，這樣才能得出正確的預(yù)期：

it('is not called with same value', (done) = > {
 wrapper.vm.inputValue = 'ok';
 wrapper.vm.$nextTick(() = > {
  // 清除已發(fā)生的狀態(tài)
  spy.mockClear();
  wrapper.vm.inputValue = 'ok';
  wrapper.vm.$nextTick(() = > {
   expect(spy).not.toBeCalled();
   done()
  })
 })
});

測試方法

單元測試的核心之一就是測試方法的行為是否符合預(yù)期，在測試時要避免一切的依賴，將所有的依賴都mock掉。

創(chuàng)建Test3組件，輸入問題后，點擊按鈕后，使用axios發(fā)送HTTP請求，獲取答案

 .wrapper {
  width: 500px;
  margin: 0 auto;
  text-align: left;
 }

 這個例子里面，我們僅僅關(guān)注測試getAnswer方法，其他的忽略掉。為了測試這個方法，我們需要做的有：

• 我們不需要實際調(diào)用axios.get方法，需要將它mock掉

• 我們需要測試是否調(diào)用了axios方法（但是并不實際觸發(fā)）并且返回了一個Promise對象

• 返回的Promise對象執(zhí)行了回調(diào)函數(shù)，設(shè)置用戶名和頭像

我們現(xiàn)在要做的就是mock掉外部依賴。Jest提供了一個很好的mock系統(tǒng)，讓我們能夠很輕易的mock所有依賴，前面我們用過jest.spyOn方法和jest.fn方法，但對于上面的例子來說，僅使用這兩個方法是不夠的。

我們現(xiàn)在要mock掉整個axios模塊，使用的方法是jest.mock，就可以mock掉依賴的模塊。

jest.mock('dependency-path', implementationFunction)

在Test3.spec.js中，首先將axios中的get方法替換為我們的mock函數(shù)，然后引入相應(yīng)的模塊

jest.mock('axios', () => ({
 get: jest.fn()
}));
import { shallow } from 'vue-test-utils';
import Test3 from '@/components/Test3';
import axios from 'axios';

然后測試點擊按鈕后，axios的get方法是否被調(diào)用：

describe('Test for Test3 Component', () => {
 let wrapper;

 beforeEach(() => {
  axios.get.mockClear();
  wrapper = shallow(Test3);
 });

 afterEach(() = > {
  wrapper.destroy()
 });

 // 點擊按鈕后調(diào)用了 getAnswer 方法
 it('getAnswer Fn should be called', () => {
  const mockFn = jest.fn();
  wrapper.setMethods({getAnswer: mockFn});
  wrapper.find('button').trigger('click');
  expect(mockFn).toBeCalled();
 });

 // 點擊按鈕后調(diào)用了axios.get方法
 it('axios.get Fn should be called', () => {
  const URL = 'https://yesno.wtf/api';
  wrapper.find('button').trigger('click');
  expect(axios.get).toBeCalledWith(URL)
 });
});

測試結(jié)果發(fā)現(xiàn)，雖然我們的mock函數(shù)被調(diào)用了，但是控制臺還是報錯了，原因是我們mock的axios.get方法雖然被調(diào)用了，但是并沒有返回任何值，所以報錯了，所以下一步我們要給get方法返回一個Promise，查看方法能否正確處理我們返回的數(shù)據(jù)

jest.fn()接受一個工廠函數(shù)作為參數(shù)，這樣就可以定義其返回值

const mockData = {
 data: {
  answer: 'mock_yes',
  image: 'mock.png'
 }
};
jest.mock('axios', () => ({
 get: jest.fn(() => Promise.resolve(mockData))
}));

getAnswer是一個異步請求，Jest提供的解決異步代碼測試的方法有以下三種：

1. 回調(diào)函數(shù)中使用done()參數(shù)

2. Pomise

3. Aysnc/Await

第一種是使用在異步請求的回調(diào)函數(shù)中使用Jest提供的叫做done的單參數(shù)，Jest會等到done()執(zhí)行結(jié)束后才會結(jié)束測試。

我們使用第二種和第三種方法來測試getAnswer方法的返回值，前提就是在方法中返回一個Promise。（一般來說，在被測試的方法中給出一個返回值會讓測試更加容易）。 Jest會等待Promise解析完成。 如果承諾被拒絕，則測試將自動失敗。

// axios.get方法返回值（Promise）
it('Calls get promise result', () = > {
 return expect(wrapper.vm.getAnswer()).resolves.toEqual(mockData);
});

或者可以使用第三種方法，也就是使用async和await來測試異步代碼：

// 可以用 Async/Await 測試 axios.get 方法返回值
it('Calls get promise result 3', async() = > {
 const result = await wrapper.vm.getAnswer();
 expect(result).toEqual(mockData)
});

Jest都提供了resolves和rejects方法作為then和catch的語法糖：

it('Calls get promise result 2', () = > {
 return wrapper.vm.getAnswer().then(result = > {
  expect(result).toEqual(mockData);
 })
});

it('Calls get promise result 4', async() = > {
 await expect(wrapper.vm.getAnswer()).resolves.toEqual(mockData)
});

mock依賴

我們可以創(chuàng)建一個__mocks__文件夾，將mock文件放入其中，這樣就不必在每個測試文件中去單獨的手動mock模塊的依賴

在__mocks__文件夾下創(chuàng)建axios.js文件：

// test/__mocks__/axios.js
const mock = {
 get: jest.fn(() => Promise.resolve({
  data: {
   answer: 'mock_yes',
   image: 'mock.png'
  }
 }))
};
export default mock

這樣就可以將Test3.spec.js中的jest.mock部分代碼移除了。Jest會自動在__mocks__文件夾下尋找mock的模塊，但是有一點要注意，模塊的注冊和狀態(tài)會一直被保存，所有如果我們在Test3.spec.js最后增加一條斷言：

// 如果不清除模塊狀態(tài)此條斷言會失敗
it('Axios should not be called here', () = > {
 expect(axios.get).not.toBeCalled()
});

因為我們在beforeEach中添加了axios.get的狀態(tài)清除的語句 axios.get.mockClear()，所以上面的斷言會通過，否則會失敗。

也可以用另外resetModules和clearAllMocks來確保每次開始前都重置模塊和mock依賴的狀態(tài)。

beforeEach(() = > {
 wrapper = shallow(Test3);
 jest.resetModules();
 jest.clearAllMocks();
});

我們在項目中有時候會根據(jù)需要對不同的Http請求的數(shù)據(jù)進行Mock，以MockJS為例，一般每個組件（模塊）都有對應(yīng)的mock文件，然后通過index.js導(dǎo)入到系統(tǒng)。Jest也可以直接將MockJS的數(shù)據(jù)導(dǎo)入，只需要在setup.js中導(dǎo)入MockJS的index.js文件即可

測試插槽

插槽（slots）用來在組件中插入、分發(fā)內(nèi)容。創(chuàng)建一個使用slots的組件Test4

// TEST4

  


// MessageList

 


// Message
{{message}}

在測試slots時，我們的關(guān)注點是slots中的內(nèi)容是否在組件中出現(xiàn)在該出現(xiàn)的位置，測試方法和前面介紹的測試DOM結(jié)構(gòu)的方法相同。

具體到例子中來看，我們要測試的是：Message組件是否出現(xiàn)在具有l(wèi)ist-messages的類的ul中。在測試時，為了將slots傳遞給MessageList組件，我們在MessageList.spec.js中的mount或者shallow方法中使用slots屬性

import { mount } from 'vue-test-utils';
import MessageList from '@/components/Test4/MessageList';

describe('Test for MessageList of Test4 Component', () => {
 let wrapper;

 beforeEach(() => {
  wrapper = mount(MessageList, {
   slots: {
    default: '