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