您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

Nuxt.js 开发工具

测试是 Web 应用开发过程中不可获缺的工作。

Nuxt.js 尽量帮助你简化这部分工作。

端对端测试

 是很强大的 JavaScript 测试框架,结合 ,我们就可以轻松地给 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 { resolve } from 'path'
import test from 'ava'
import { Nuxt, Builder } from 'nuxt'

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

// 初始化 Nuxt.js 并创建监听 localhost:4000 的服务器
test.before('Init Nuxt.js', async (t) => {
  const rootDir = resolve(__dirname, '..')
  let con = {}
  try { con = require(resolve(rootDir, 'nuxt.con.js')) } catch (e) {}
  con.rootDir = rootDir // 项目目录
  con.dev = false // 生产构建模式
  nuxt = new Nuxt(con)
  await new Builder(nuxt).build()
  nuxt.listen(4000, 'localhost')
})

// 测试的html
test('路由 / 有效且能渲染 HTML', async (t) => {
  const 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元素 的测试了。 如果想使用真实的浏览器引擎来测试你的应用,推荐瞅瞅 。

ESLint

ESLint 是很棒的工具,帮助我们提升的规范和质量。

在 Nuxt.js 中集成  是非常简单的,首先我们需要安装 ESLint 的一系列依赖包:

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

然后, 在项目根目录下创建 .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'
  ],
  // 校验 .vue 
  plugins: [
    'vue'
  ],
  // 规则
  rules: {
    'semi': [2, 'never'],
    'no-console': 'off',
    'vue/max-attributes-per-line': 'off',
    'prettier/prettier': ['error', { 'semi': false }]
  }
}

最后,我们在 package.json 中 lint和 lintfix脚本命令:

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

你现在可以启动lint来检查:

npm run lint

或者 lintfix 还可以修复那些可修复的

npm run lintfix

ESLint将检测校验所有JavaScript和Vue,同时忽略.gitignore中定义的被忽略。

还建议通过webpack启用ESLint热更新模式。这样ESLint将在npm run dev时保存。只需将以下到您的nuxt.con.js:

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

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


联系我
置顶