vue-cli5脚手架搭建项目过程详解 -vue组件单元测试
简介
单元测试是对软件中的最小可测试单元进行测试。（最小可测试单元是要有结果产出的。例如某个方法，单独的某个操作）
单元测试其实是伴随着敏捷开发，它是对更快开发的一种追求。早发现错误比晚发现错误会更好，保证自己的代码符合要求
一: 搭建基于 jest 的 vue 单元测试环境 零配置开箱即用 https://jestjs.io/zh-Hans/docs/getting-started
二: 使用 vue-test-util 提高测试编码效率 https://v1.test-utils.vuejs.org/zh/guides/
（一） 手动搭建
编写 jest 配置文件
// jest.conf.js
const path = require('path');module.exports = {rootDir: path.resolve(__dirname, '../../'), // 类似 webpack.contextmoduleFileExtensions: [ // 类似 webpack.resolve.extensions'js','json','vue',],moduleNameMapper: {'^@/(.*)$': '<rootDir>/src/$1', // 类似 webpack.resolve.alias},transform: { // 类似 webpack.module.rules'^.+\\.js$': '<rootDir>/node_modules/babel-jest','.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',},setupFiles: ['<rootDir>/test/unit/setup'], // 类似 webpack.entrycoverageDirectory: '<rootDir>/test/unit/coverage', // 类似 webpack.outputcollectCoverageFrom: [ // 类似 webpack 的 rule.include'src/**/*.{js,vue}','!src/main.js','!src/router/index.js','!**/node_modules/**',],
};
eslintrc.js
//
module.exports = {env: {browser: true,es6: true,jest: true},parserOptions: {sourceType: 'module'},
}
（二） 通过vue-cli5脚手架创建
vue-cli5
npm install -g @vue/clivue create 项目名我们选择 手动配置
上下键控制 空格选择 这里选择Babel转码器 Router Unit Testing 单元测试勾选上
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用
( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
( ) Router // vue-router（vue路由）
( ) Vuex // vuex（vue的状态管理模式）
( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
( ) Unit Testing // 单元测试（unit tests）
( ) E2E Testing // e2e（end to end） 测试
选择版本 2.x
是否开启history模式 选择否
选择样式预处理
语法检测工具，这里我选择ESLint + Standard config
Please pick a preset: Manually select featuresCheck the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, UnitPick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): StylusPick a linter / formatter config: (Use arrow keys)ESLint with error prevention onlyESLint + Airbnb config
> ESLint + Standard configESLint + Prettier
选择语法检查方式，这里我选择fix和commit时候检查检测
Please pick a preset: Manually select featuresCheck the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, UnitPick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): StylusPick a linter / formatter config: PrettierPick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)( ) Lint on save // 保存就检测
>( ) Lint and fix on commit // fix和commit时候检查
Unit Testing 勾选后 jest 回车安装
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-proce
ssors, Linter, Unit
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback
in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported
by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Pick a unit testing solution: (Use arrow keys)
❯ Jest Mocha + Chai 接下来会问你把babel,postcss,eslint这些配置文件放哪，这里随便选，我选择放在放package.json里
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-proce
ssors, Linter, Unit
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback
in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported
by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files // 独立文件放In package.json // 放package.json里? Save this as a preset for future projects? (y/N) // 是否记录一下以便下次继续使用这套配置。
等待安装完成
100 packages are looking for fundingrun `npm fund` for details
vue-cli5脚手架搭建项目过程详解 -vue组件单元测试相关推荐
- 脚手架搭建项目（详解)
一.什么是脚手架? 在vue中 ,脚手架使用的是 ,vue-cli这个技术 脚手架,就是一个今后所写项目的一个基本的空框架 ,这个空框架中包含了 与项目业务无关的空框框 二.安装步骤 1.电脑上必须有 ...
- Java web 开发的概念、环境配置、创建项目过程详解（Eclipse）
Java Web 开发 Java Web 开发概念 搭建过程 详解 在eclipse创建Dynamic Web Project 创建时选择Tomcat的版本 创建项目成功 eclipse环境下如何配置 ...
- vue脚手架搭建项目_复习之vue脚手架搭建项目的两种方法
安装脚手架 node 版本要求: > 8.9 . 关于旧版本:如果在这之前已经全局安装了旧版本的vue-cli(1.x 或 2.x),那么需要先卸载掉. 卸载旧版本运行:``npm uninst ...
- ECharts 数据各种图自适应 可视化 项目过程详解（附完整代码）
前言: 本篇文章的学习目的: 1.可视化面板布局适配屏幕 2.利用ECharts 实现柱状图展示 实现的技术栈: 基于 flexible.js +rem 智能大屏适配 VScode cssrem插件 ...
- vue单文件props写法_详解Vue 单文件组件的三种写法
详解Vue 单文件组件的三种写法 JS构造选项写法 export defaul { data, methods, ...} JS class写法 @Component export default c ...
- vue输入框输入触发事件_详解.vue文件中监听input输入事件（oninput）
详解.vue文件中监听input输入事件(oninput) .vue文件其实是一个组件,关于它的说明我之前也写过一篇文章,地址:.vue文件,今天这篇文章要讲的是.vue文件中监听input的输入值变 ...
- vue 代理设置 访问图片_详解Vue源码之数据的代理访问
概念解析: 1) 数据代理: 通过一个对象代理对另一个对象(在前一个对象内部)中属性的操作(读/写) 2) vue 数据代理: 通过 vm 对象(即this)来代理 data 对象中所有属性的操作 3 ...
- vueCli脚手架搭建和文件详解（超详细保姆级教学）
一.找到希望创建项目的文件夹,进入终端 二.执行 vue create 文件夹名称 运行结果如下: 1.选择Manually select features ==> 手动选择特征(自己选择设置) ...
- java集群_Kafka多节点分布式集群搭建实现过程详解_java
上一篇分享了单节点伪分布式集群搭建方法,本篇来分享一下多节点分布式集群搭建方法.多节点分布式集群结构如下图所示: 为了方便查阅,本篇将和上一篇一样从零开始一步一步进行集群搭建. 一.安装Jdk 具体安 ...
最新文章
- [征询意见][投票]先集中力量做好一个开源项目
- javascript event
- electron增加导航按钮_Electron发布6.0 Released版本
- Java 获取集合长度
- 印记博客IBO博客系统 v2.0.2源码
- Oracle绑定变量和审计功能影响性能吗？Python告诉你
- vue 日历 vue-calendar
- 前后端分离之后，如何保护你的API
- H5拖拽方法drag在VUE中的应用实例
- Win10怎么合并磁盘分区 合并磁盘的操作方法
- 人体神经元与胶质关系图,神经元和神经胶质关系
- Latex 插入的图片紧跟当前文字
- java 大数加减算法
- 18、ListView显示图片
- 一款产品经理很好用的产品原型Axure配合软件--墨刀，将产品原型Axure，添加到墨刀，可以/预览/设计/编辑/共享/协同设计
- MTK BROM 作用
- sampler采样器记录
- pytorch 定义torch类型数据_PyTorch 使用 TorchText 进行文本分类
- 28 岁程序员身价过亿，选择退休东渡日本
- 6.商品服务-API-三级分类
热门文章