Vue.js教程
9.12 开发工具
阅读(

Vue.js 基础

Vue.js 过渡和动画

Vue.js 可复用性和组合

Vue.js 工具

Vue.js 模块化

Vue.js 响应式系统原理

Vue.js API

Vue.js 服务器端渲染 SSR

Vue.js 服务端渲染 Nuxt.js

Nuxt.js简介

Nuxt.js安装

Nuxt.js目录结构

Nuxt.js配置

Nuxt.js路由

Nuxt.js视图

Nuxt.js异步数据

Nuxt.js资源文件

Nuxt.js插件

Nuxt.js Vuex状态树

Nuxt.js命令

Nuxt.js开发工具

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

端对端测试

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

首先,我们需要添加avajsdom作为项目的开发依赖:

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",这样可以实现每次提交代码之前自动进行代码检测校验。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验