开发工具

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

端对端测试

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

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

  1. npm install --save-dev ava jsdom

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

package.json

  1. "scripts": {
  2. "test": "ava",
  3. },
  4. "ava": {
  5. "require": [
  6. "babel-register"
  7. ]
  8. },
  9. "babel": {
  10. "presets": [
  11. "es2015"
  12. ]
  13. }

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

  1. mkdir test

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

  1. <template>
  2. <h1 class="red">Hello {{ name }}!</h1>
  3. </template>
  4. <script>
  5. export default {
  6. data () {
  7. return { name: 'world' }
  8. }
  9. }
  10. </script>
  11. <style>
  12. .red {
  13. color: red;
  14. }
  15. </style>

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

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

  1. import { resolve } from 'path'
  2. import test from 'ava'
  3. import { Nuxt, Builder } from 'nuxt'
  4. // 我们用一个变量保留 nuxt 和 server 实例的引用
  5. // 这样可以在单元测试结束之后关掉它们
  6. let nuxt = null
  7. // 初始化 Nuxt.js 并创建一个监听 localhost:4000 的服务器
  8. test.before('Init Nuxt.js', async (t) => {
  9. const rootDir = resolve(__dirname, '..')
  10. let config = {}
  11. try { config = require(resolve(rootDir, 'nuxt.config.js')) } catch (e) {}
  12. config.rootDir = rootDir // 项目目录
  13. config.dev = false // 生产构建模式
  14. nuxt = new Nuxt(config)
  15. await new Builder(nuxt).build()
  16. nuxt.listen(4000, 'localhost')
  17. })
  18. // 测试生成的html
  19. test('路由 / 有效且能渲染 HTML', async (t) => {
  20. const context = {}
  21. const { html } = await nuxt.renderRoute('/', context)
  22. t.true(html.includes('<h1 class="red">Hello world!</h1>'))
  23. })
  24. // 测试元素的有效性
  25. test('路由 / 有效且渲染的HTML有特定的CSS样式', async (t) => {
  26. const window = await nuxt.renderAndGetWindow('http://localhost:4000/')
  27. const element = window.document.querySelector('.red')
  28. t.not(element, null)
  29. t.is(element.textContent, 'Hello world!')
  30. t.is(element.className, 'red')
  31. t.is(window.getComputedStyle(element).color, 'red')
  32. })
  33. // 关掉服务器和Nuxt实例,停止文件监听。
  34. test.after('Closing server and nuxt.js', (t) => {
  35. nuxt.close()
  36. })

运行上面的单元测试:

  1. npm test

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

ESLint

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

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

  1. 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:

  1. module.exports = {
  2. root: true,
  3. env: {
  4. browser: true,
  5. node: true
  6. },
  7. parserOptions: {
  8. parser: 'babel-eslint'
  9. },
  10. extends: [
  11. 'eslint:recommended',
  12. // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
  13. // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
  14. 'plugin:vue/recommended',
  15. 'plugin:prettier/recommended'
  16. ],
  17. // 校验 .vue 文件
  18. plugins: [
  19. 'vue'
  20. ],
  21. // 自定义规则
  22. rules: {
  23. 'semi': [2, 'never'],
  24. 'no-console': 'off',
  25. 'vue/max-attributes-per-line': 'off',
  26. 'prettier/prettier': ['error', { 'semi': false }]
  27. }
  28. }

最后,我们在 package.json 文件中添加一个 lintlintfix脚本命令:

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

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

  1. npm run lint

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

  1. npm run lintfix

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

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

  1. ...
  2. /*
  3. ** Build configuration
  4. */
  5. build: {
  6. /*
  7. ** 您可以在这里扩展webpack配置
  8. */
  9. extend(config, ctx) {
  10. // Run ESLint on save
  11. if (ctx.isDev && ctx.isClient) {
  12. config.module.rules.push({
  13. enforce: "pre",
  14. test: /\.(js|vue)$/,
  15. loader: "eslint-loader",
  16. exclude: /(node_modules)/
  17. })
  18. }
  19. }
  20. }

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