9.12 开发工具

优质

小牛编辑

135浏览

2023-12-01

测试是 Web 应用开发过程中不可获缺的工作。Nuxt.js 尽量帮助你简化这部分工作。

端对端测试

ava是一个很强大的 JavaScript 测试框架，结合jsdom，我们就可以轻松地给nuxt应用进行端对端测试。

首先，我们需要添加ava和jsdom作为项目的开发依赖：

npm install --save-dev ava jsdom

然后在package.json中添加测试脚本，并配置 ava 如果编译待测试的文件：

package.json

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

接下来我们可以在test目录下编写单元测试的逻辑代码：

mkdir test

假设我们有这样一个页面pages/index.vue：

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

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

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

当我们利用npm run dev启动开发服务器的时候，用浏览器打开http://localhost:3000，我们能看到红色的Hello world标题。

添加一个单元测试文件test/index.test.js：

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

// 我们用两个变量保留 nuxt 和 server 实例的引用
// 这样可以在单元测试结束之后关掉它们
let nuxt = null

// 初始化 Nuxt.js 并创建一个监听 localhost:4000 的服务器
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 // 项目目录
  config.dev = false // 生产构建模式
  nuxt = new Nuxt(config)
  await new Builder(nuxt).build()
  nuxt.listen(4000, 'localhost')
})

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

// 测试元素的有效性
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')
})

// 关掉服务器和Nuxt实例，停止文件监听。
test.after('Closing server and nuxt.js', t => {
  nuxt.close()
})

运行上面的单元测试：

npm test

实际上jsdom会有一定的限制性，因为它背后并没有使用任何的浏览器引擎，但是也能涵盖大部分关于 dom元素的测试了。如果想使用真实的浏览器引擎来测试你的应用，推荐瞅瞅Nightwatch.js。

ESLint

ESLint 是一个很棒的工具，帮助我们提升代码的规范和质量。

在 Nuxt.js 中集成ESLint是非常简单的，首先我们需要安装 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

然后, 在项目根目录下创建.eslintrc.js文件用于配置 ESLint：

module.exports = {
  root: true,
  parser: 'babel-eslint',
  env: {
    browser: true,
    node: true
  },
  extends: 'standard',
  // 校验 .vue 文件
  plugins: [
    'html'
  ],
  // 自定义规则
  rules: {},
  globals: {}
}

最后，我们在package.json文件中添加一个lint脚本命令：

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

通过以上配置，可使用以下命令对项目的代码进行 ESLint 校验：

npm run lint

ESLint 会校验应用所有的 JavaScript 和 Vue 文件，除了在.gitignore中忽略了的之外。

有个最佳实践是在package.json中增加"precommit": "npm run lint"，这样可以实现每次提交代码之前自动进行代码检测校验。