測(cè)試是 Web 應(yīng)用開發(fā)過程中不可獲缺的工作。Nuxt.js 盡量幫助你簡(jiǎn)化這部分工作。

端對(duì)端測(cè)試

ava 是一個(gè)很強(qiáng)大的 JavaScript 測(cè)試框架，結(jié)合 jsdom，我們就可以輕松地給 nuxt 應(yīng)用進(jìn)行端對(duì)端測(cè)試。

首先，我們需要添加 ava 和 jsdom 作為項(xiàng)目的開發(fā)依賴：

npm install --save-dev ava jsdom

然后在 package.json 中添加測(cè)試腳本，并配置 ava 如果編譯待測(cè)試的文件：

package.json

"scripts": {
  "test": "ava",
},
"ava": {
  "require": [
    "babel-register"
  ]
},
"babel": {
  "presets": [
    "es2015"
  ]
}

接下來我們可以在 test 目錄下編寫單元測(cè)試的邏輯代碼：

mkdir test

假設(shè)我們有這樣一個(gè)頁(yè)面 pages/index.vue：

<template>
  <h1 class="red">Hello {{ name }}!</h1>
</template>

<script>
export default {
  data () {
    return { name: 'world' }
  }
}
</script>

<style>
.red {
  color: red;
}
</style>

當(dāng)我們利用 npm run dev 啟動(dòng)開發(fā)服務(wù)器的時(shí)候，用瀏覽器打開 http://localhost:3000，我們能看到紅色的 Hello world 標(biāo)題。

添加一個(gè)單元測(cè)試文件 test/index.test.js：

import { resolve } from 'path'
import test from 'ava'
import { Nuxt, Builder } from 'nuxt'

// 我們用一個(gè)變量保留 nuxt 和 server 實(shí)例的引用
// 這樣可以在單元測(cè)試結(jié)束之后關(guān)掉它們
let nuxt = null

// 初始化 Nuxt.js 并創(chuàng)建一個(gè)監(jiān)聽 localhost:4000 的服務(wù)器
test.before('Init Nuxt.js', async (t) => {
  const rootDir = resolve(__dirname, '..')
  let config = {}
  try { config = require(resolve(rootDir, 'nuxt.config.js')) } catch (e) {}
  config.rootDir = rootDir // 項(xiàng)目目錄
  config.dev = false // 生產(chǎn)構(gòu)建模式
  nuxt = new Nuxt(config)
  await new Builder(nuxt).build()
  nuxt.listen(4000, 'localhost')
})

// 測(cè)試生成的html
test('路由 / 有效且能渲染 HTML', async (t) => {
  const context = {}
  const { html } = await nuxt.renderRoute('/', context)
  t.true(html.includes('<h1 class="red">Hello world!</h1>'))
})

// 測(cè)試元素的有效性
test('路由 / 有效且渲染的HTML有特定的CSS樣式', async (t) => {
  const window = await nuxt.renderAndGetWindow('http://localhost:4000/')
  const element = window.document.querySelector('.red')
  t.not(element, null)
  t.is(element.textContent, 'Hello world!')
  t.is(element.className, 'red')
  t.is(window.getComputedStyle(element).color, 'red')
})

// 關(guān)掉服務(wù)器和Nuxt實(shí)例，停止文件監(jiān)聽。
test.after('Closing server and nuxt.js', (t) => {
  nuxt.close()
})

運(yùn)行上面的單元測(cè)試：

npm test

實(shí)際上 jsdom 會(huì)有一定的限制性，因?yàn)樗澈蟛]有使用任何的瀏覽器引擎，但是也能涵蓋大部分關(guān)于 dom元素 的測(cè)試了。 如果想使用真實(shí)的瀏覽器引擎來測(cè)試你的應(yīng)用，推薦瞅瞅 Nightwatch.js。

ESLint

ESLint 是一個(gè)很棒的工具，幫助我們提升代碼的規(guī)范和質(zhì)量。

在 Nuxt.js 中集成 ESLint 是非常簡(jiǎn)單的，首先我們需要安裝 ESLint 的一系列依賴包：

npm install --save-dev babel-eslint eslint eslint-config-standard eslint-plugin-html eslint-plugin-promise eslint-plugin-standard eslint-plugin-import eslint-plugin-node

然后, 在項(xiàng)目根目錄下創(chuàng)建 .eslintrc.js 文件用于配置 ESLint：

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: 'babel-eslint'
  },
  extends: [
    'eslint:recommended',
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/recommended',
    'plugin:prettier/recommended'
  ],
  // 校驗(yàn) .vue 文件
  plugins: [
    'vue'
  ],
  // 自定義規(guī)則
  rules: {
    'semi': [2, 'never'],
    'no-console': 'off',
    'vue/max-attributes-per-line': 'off',
    'prettier/prettier': ['error', { 'semi': false }]
  }
}

最后，我們?cè)?nbsp;package.json 文件中添加一個(gè) lint和 lintfix腳本命令：

"scripts": {
  "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
  "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."
}

你現(xiàn)在可以啟動(dòng)lint來檢查錯(cuò)誤：

npm run lint

或者 lintfix 還可以修復(fù)那些可修復(fù)的

npm run lintfix

ESLint將檢測(cè)校驗(yàn)所有JavaScript和Vue文件，同時(shí)忽略.gitignore中定義的被忽略文件。

還建議通過webpack啟用ESLint熱更新模式。這樣ESLint將在npm run dev時(shí)保存。只需將以下內(nèi)容添加到您的nuxt.config.js：

...
  /*
   ** Build configuration
  */
  build: {
   /*
    ** 您可以在這里擴(kuò)展webpack配置
   */
   extend(config, ctx) {
      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: "pre",
          test: /\.(js|vue)$/,
          loader: "eslint-loader",
          exclude: /(node_modules)/
        })
      }
    }
  }

有個(gè)最佳實(shí)踐是在 package.json 中增加 "precommit": "npm run lint" ，這樣可以實(shí)現(xiàn)每次提交代碼之前自動(dòng)進(jìn)行代碼檢測(cè)校驗(yàn)。