afeng-ui v2.1.0

project

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your unit tests

npm run test:unit

Customize configuration

See Configuration Reference.

这里的shallowMount被译为潜渲染，也就是说HelloWorld中引入其他组件是会被忽略掉的，当然也有深度渲染mount方法！

我们每写完一个功能，会先手动测试功能是否正常，测试后可能会将测试代码注释起来。这样会产生一系列问题，因为会污染源代码，所有的测试代码和源代码混合在一起。如果删除掉，下次测试还需要重新编写。

jest默认自带断言功能，断言的意思就是判断是不是这个样子，我断定你今天没吃饭~，结果你吃了。说明这次断言就失败了，测试就无法通过

匹配器分为三类、判断相等、不等、是否包含

为了更方便的测试Vue官方提供给我们了个测试工具Vue Test Utils,而且这个工具为了方便应用，采用了同步的更新策略

import Vue from 'vue'; import HelloWorld from '@/components/HelloWorld'; import {shallowMount} from '@vue/test-utils' describe('测试HelloWolrd 组件',()=>{ it('传入 msg 属性看能否渲染到h1标签内',()=>{ const wrapper = shallowMount(HelloWorld,{ propsData:{ msg:'hello' } }) expect(wrapper.find('h1').text()).toContain('hello') }); });

这样写测试是不是很hi,可以直接渲染组件传入属性，默认返回wrapper，wrapper上提供了一系列方法，可以快速的获取dom元素! 其实这个测试库的核心也是在 wrapper的方法上, 更多方法请看 Vue Test Utils

这里的shallowMount被译为潜渲染，也就是说HelloWorld中引入其他组件是会被忽略掉的，当然也有深度渲染mount方法！

刚才写测试的这种方式就是先编写功能！编写完成后,我们来模拟用户的行为进行测试，而且只测试其中的某个具体的功能！ 这就是我们所谓的 BDD形式的单元测试。

1.4 测试框架 Karma Karma为前端自动化测试提供了跨浏览器测试的能力，可以在浏览器中执行测试用例 Mocha 前端自动化测试框架,需要配合其他库一起使用，像chai、sinon... Jest Jest 是facebook推出的一款测试框架,集成了 Mocha,chai,jsdom,sinon等功能。 ... 看到这facebook 都在推Jest,你还不学吗? Jest也有一些缺陷就是不能像karam这样直接跑早浏览器上，它采用的是jsdom，优势是简单、0配置！ 后续我们通过jest来聊前端自动化测试

jest常用的命令,matchers匹配器 测试操作jsdom,在node中操作dom元素,异步函数测试,mock使用，钩子函数等等

Vue中集成Jest的

var webpackConfig = require('@vue/cli-service/webpack.config')

module.exports = function(config) { config.set({ frameworks: 'mocha', files: 'tests/*/.spec.js',//需要加载到浏览器的文件列表 preprocessors: { //在浏览器使用之前处理匹配的文件 '*/.spec.js': 'webpack', 'sourcemap' }, autoWatch: true,//启用或禁用自动检测文件变化进行测试 webpack: webpackConfig, reporters: 'spec', // 使用reporters为"spec"时报告输出的类型和那目录 browsers: 'ChromeHeadless' //测试启动的浏览器 }) }

一般我们通过describe 来划分作用域

npm unpublish zhu-feng-ui --force