一、端对端测试
ava
是一个很强大的 JavaScript 测试框架,结合 jsdom
,可以轻松地给 nuxt
应用进行端对端测试。需要三步骤就可以完成端对端测试:
(1)添加 ava
和 jsdom
作为项目的开发依赖:npm install --save-dev ava jsdom
(2)在 package.json
中添加测试脚本,并配置 ava 需要编译待测试的文件。
(3)在 test
目录下编写单元测试的逻辑代码。
实际上 jsdom
会有一定的限制性,因为它背后并没有使用任何的浏览器引擎,但是也能涵盖大部分关于 dom元素的测试了。 如果想使用真实的浏览器引擎来测试你的应用,可以参考Nightwatch.js。
二、代码规范
ESLint 是一个很棒的工具,帮助我们提升代码的规范和质量。需要四步完成该工具的应用:
(1)安装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
(2)配置 ESLint
在项目根目录下创建 .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 }] } }
(3)添加命令
在 package.json
文件中添加一个 lint
和 lintfix
脚本命令,如下文所示:
"scripts": { "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ." }
ESLint将检测校验所有JavaScript和Vue文件,同时忽略.gitignore
中定义的被忽略文件。
(4)启动命令
- npm run lint:检查错误
- npm run lintfix:修复那些可修复的
建议通过webpack启用ESLint热更新模式。这样ESLint将在npm run dev
时保存,可以在nuxt.config.js文件进行配置:
/* ** Build configuration */ build: { /* ** 您可以在这里扩展webpack配置 */ extend(config, ctx) { // Run ESLint on save if (ctx.isDev && ctx.isClient) { config.module.rules.push({ enforce: "pre", test: /.(js|vue)$/, loader: "eslint-loader", exclude: /(node_modules)/ }) } } }
在 package.json
中增加 "precommit": "npm run lint"
,这样可以实现每次提交代码之前自动进行代码检测校验。