vue2.0-3——vue-cli、jest单测、vue-test-uitls、测试组件的思想、写测试的三部曲

゜.

已于 2022-02-17 01:59:26 修改

阅读量821

点赞数

分类专栏： vue2.0 文章标签： vue.js 前端

于 2021-12-10 10:10:20 首次发布

本文链接：https://blog.csdn.net/weixin_44320960/article/details/121809137

版权

vue2.0 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

vue-cli
jest单测
vue-test-uitls
测试组件的思想
写测试的三部曲

FSC

1.单文件组件 （将组件Vue.component()内的template和js逻辑分开，vue的单文件组件 简写 FSC，提供很多便捷的语法，将单例出来放入app.vue内，把组件分成3块，样式，组件template，js逻辑）
2.优点
	完整语法高亮
	组件作用域的 CSS
3.vscode插件
	vetur

vue-cli （脚手架）使用cli可一键创建出vue项目，让浏览器理解.vue等后缀的文件；

官方地址
	https://cli.vuejs.org/zh/
优点
	1.功能丰富
		集成了所有前端生态里最优秀的工具
	2.易于扩展
		插件系统
	3.CLI 之上的图形化界面
		可以使用可视化页面创建项目
	4.即刻创建原型
		方便快捷验证想法
	5.面向未来
		为现代浏览器轻松产出原生的 ES2015 代码，或将你的 Vue 组件构建为原生的 Web Components 组件
	6.无需 eject
		Vue CLI 完全是可配置的，无需 eject。这样你的项目就可以长期保持更新了。
安装
	npm i @vue/cli -g
使用
	项目
		创建
			vue create [projectName]
		开发(cd切换到对应项目下，跑起来)
			yarn serve
			npm run serve
		构建
			yarn build
			npm run serve
插件
	安装
		vue add [pluginName]
			vue add @vue/eslint
			vue add @vue/unit-jest
可视化
	vue ui

刚创建好的目录结构：
1.node_modules  第三方依赖
2.public  存放公共资源，不会被webpack打包进去的
3.src  一般放置源码
		assets  存放资源，会被webpack打包进去
		components  存放组件
		App.vue  （<template> <script> <style> 三部分组成）属于整个运用的根组件，
		main.js 相对应项目的入口文件，属于整个运用的入口
4.其他文件 --> 配置项，资源
	package.json  内的scripts对象  
		lint  检测格式 npm run lint  
		 	若有错误的话，给我们友好的提示。
		serve 跑项目 npm run serve 
		
		build 构建项目  npm run build
			完成后生成的以下文件，可交给后端进行发布，或自己发布到服务器上，外部就可通过域名访问
			  File                         Size                                            Gzipped
  dist\js\chunk-vendors.ca45571f.js    93.70 KiB                                            33.62 KiB
  dist\js\app.b63cf2f6.js              4.58 KiB                                             1.64 KiB
  dist\css\app.09e84613.css            0.33 KiB                                             0.23 KiB
  
  5.dist  打包之后的文件

需要安装vetur插件，提供vscode插件
推荐安装 vue VSCode Snippets  可通过一些指令快速创建一个模板
推荐安装 Javascript (es6) code snippets 快速创建js一些代码

vue ui  进入可视化界面，和npm内敲是一样的

记住：如何去看cli文档api
学会看以下东西：
vue --help

用法：vue <command> [options]
Usage: vue <command> [options]

Options:
  -V, --version                              output the version number
  -h, --help                                 output usage information

Commands:
  create [options] <app-name>                create a new project powered by vue-cli-service
  add [options] <plugin> [pluginOptions]     install a plugin and invoke its generator in an already created project
  invoke [options] <plugin> [pluginOptions]  invoke the generator of a plugin in an already created project
  inspect [options] [paths...]               inspect the webpack config in a project with vue-cli-service
  serve [options] [entry]                    serve a .js or .vue file in development mode with zero config
  build [options] [entry]                    build a .js or .vue file in production mode with zero config
  ui [options]                               start and open the vue-cli ui
  init [options] <template> <app-name>       generate a project from a remote template (legacy API, requires @vue/cli-init)
  config [options] [value]                   inspect and modify the config
  outdated [options]                         (experimental) check for outdated vue cli service / plugins
  upgrade [options] [plugin-name]            (experimental) upgrade vue cli service / plugins
  migrate [options] [plugin-name]            (experimental) run migrator for an already-installed cli plugin
  info                                       print debugging information about your environment

  Run vue <command> --help for detailed usage of given command.

小案例——todos-list

todos-list  
	http://todomvc.com/examples/vue/#/active
	开发思想：
		小步验证（小步快走，减少bug）重点
		迭代思想
			先开发最基础的功能，然后逐步扩展其功能
		tasking过程 (任务拆分，金字塔原理) 重点
			1.输入一个 todo ，按下回车可以添加一个 todo
			2.删除一个 todo
			3.完成一个 todo
		步骤：
			1.构建视图
			2.确定数据结构
			3.编写交互逻辑

单元测试

定义
	1.指对软件中的最小可测试单元进行检查和验证
	2.单元
		可以是一个函数
		可以是一个类
		可以是一个模块
	3.快（运行快速检测）
好处：
	1.自动化(只需要写一条指令，跑全部单元测试的功能看是否影响之前的功能)，跑单测的过程就是自动化；
	2.重构-->增加自信心，有信心去重构
	3.减少调试时间
	4.活文档
三部曲
	1.given
		准备数据
	2.when
		触发测试动作
	3.then
		验证结果

在这里插入图片描述

jest 运行在nodejs环境内的

官网
	https://jestjs.io/docs/zh-Hans/using-matchers
初始化
	npm init -y
安装
	npm i jest  @types/jest  -D
基础知识
	test/it
	匹配器
		toBe
		toEqual
		not.toBe
	describe
		描述块
	setup/ Teardown
		beforeEach
		afterEach
		beforeAll
		afterAll

mount()与shallowMount()区别：
shallowMount()会隔离子组件，推荐使用
mount() 会把子组件全部渲染出来

Button.vue

<template>
  <div>
      <button><slot>默认按钮</slot></button>
  </div>
</template>


button.spec.js

import {mount} from '@vue/test-utils';
import Button from '../../src/components/Button.vue';

describe("Button.vue",()=>{
    test("插槽 slot 默认 测试",()=>{
        const wrapper = mount(Button);
        expect(wrapper.text()).toContain("默认按钮");

        // npm run test:unit
        // npm run test:unit tests/unit/button.spec.js
    });

    test.only('插槽 slot 设置 测试',()=>{//.only只跑这块
        const wrapper = mount(Button,{
            slots:{
                "default": "警告"
            }
        })
        expect(wrapper.text()).toContain("警告");
    });
})

vue-test-uitls

是 Vue.js 官方的单元测试实用工具库。
官网
	https://vue-test-utils.vuejs.org/zh/
安装
	vue add @vue/unit-jest
原理
	Vue Test Utils 通过将组件隔离挂载，然后模拟必要的输入 (prop、注入和用户事件) 和对输出 (渲染结果、触发的自定义事件) 的断言来测试 Vue 组件。
	被挂载的组件会返回到一个包裹器内，而包裹器会暴露很多封装、遍历和查询其内部的 Vue 组件实例的便捷的方法。
测试组件的思想
	确定 input 以及 output
	input
		props
		用户交互
			click
	output
		vue events
		rendered output 
		function calls
	不要测试细节！！！

゜.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue2.0-3——vue-cli、jest单测、vue-test-uitls、测试组件的思想、写测试的三部曲

vue-clijest单测vue-test-uitls测试组件的思想写测试的三部曲FSC1.单文件组件（将组件Vue.component()内的template和js逻辑分开，vue的单文件组件简写 FSC，提供很多便捷的语法，将单例出来放入app.vue内，把组件分成3块，样式，组件template，js逻辑）2.优点完整语法高亮组件作用域的 CSS3.vscode插件 veturvue-cli （脚手架）使用cli可一键创建出vue项目，让浏览器理解.vue等后缀的文件
复制链接

扫一扫

专栏目录