Vue.js是一個(gè)JavaScript框架，可用于構(gòu)建Web應(yīng)用程序的前端框架。特別是在創(chuàng)建復(fù)雜功能時(shí)，對于每個(gè)項(xiàng)目，有必要在我們的應(yīng)用程序中查看所有內(nèi)容，并檢查它是否符合預(yù)期。然而，對于大型項(xiàng)目，每次新的更新后，檢查每個(gè)功能將變得很麻煩。因此，我們可以創(chuàng)建可以一直運(yùn)行的自動化測試，并保證我們的代碼可以正常運(yùn)行。在本文中，我們將為VueJS創(chuàng)建一些簡單的單元測試。

要進(jìn)行測試，我們將先制作一個(gè)基本的待辦事項(xiàng)列表組件。我們將測試該列表是否正確顯示，并且用戶可以將新項(xiàng)目添加到待辦事項(xiàng)列表中。希望在本教程結(jié)束之前，您可以編寫測試，檢查您的組件輸出給用戶，以及通過與HTML進(jìn)行交互來模擬用戶操作（例如通過單擊按鈕）。

本文中的所有代碼可以在 Github 下載。

搭建環(huán)境

搭建JavaScript項(xiàng)目可能是一個(gè)復(fù)雜的過程。有那么多庫需要選擇，所有這些庫的目的都略有不同。幸運(yùn)的是，對于VueJS，我們有vue-cli，它為我們設(shè)定了一切！您需要首先安裝npm，然后可以運(yùn)行以下命令：

npm install -g vue-clivue init webpack project-name

在這個(gè)階段，你會被提示幾個(gè)問題。大多數(shù)都可以直接繼續(xù)，您可以選擇默認(rèn)選項(xiàng)，唯一的要求是您回答YES以包括vue-router和YES來設(shè)置Karma和Mocha的單元測試。然后安裝依賴項(xiàng)：

cd project-namenpm install

這個(gè)最終命令將啟動您的瀏覽器并打開localhost運(yùn)行您的應(yīng)用程序：

npm run dev

下面是對vue-cli為我們設(shè)置的一些關(guān)鍵依賴關(guān)系（非常重要）的簡要概述，包括為我自己的項(xiàng)目安裝的版本。

依賴

Webpack (v2.3) 是一個(gè)捆綁器，它結(jié)合了各種JavaScript，CSS，HTML（和其他）文件，使他們可以隨時(shí)由客戶端處理。
Babel (v6.22) 是ECMAScript 6到ECMAScript 5的編譯器。這些是不同的JavaScript標(biāo)準(zhǔn)，目前的瀏覽器不能解析所有的ECMAScript 6，因此需要進(jìn)行轉(zhuǎn)換。

測試依賴關(guān)系

Karma (v1.4) 是一個(gè)測試運(yùn)行器，它運(yùn)行一個(gè)Web服務(wù)器，其中包含項(xiàng)目的應(yīng)用程序代碼，并對其執(zhí)行測試。

Mocha (v3.2) 是JavaScript的測試框架。
Chai (v3.5) 是可以與Mocha一起使用的斷言庫。

在您的項(xiàng)目中，您應(yīng)該能找到以下文件夾：build，config，node_modules，src，static和test。對本文來說，重要的是src，它將保存我們的應(yīng)用程序代碼并進(jìn)行test。

我的第一個(gè)測試

一個(gè)好的開始需要去做一些基本工作。我們將從創(chuàng)建簡單列表組件開始。在src/components文件夾中創(chuàng)建一個(gè)名為List.vue的新文件，并將以下代碼放在里面：

<template> <div>  <h1>My To Do List</h1>  </br>  <!--displays list -->  <ul>   <li v-for="item in listItems">{{ item }}</li>  </ul> </div></template> <script>export default { name: 'list', data () {  return {   listItems: ['buy food', 'play games', 'sleep'],  } }}</script>