前端组件测试

为了解放劳动力，生产力测试的发展变成了这样：鼠标点击手动测试->使用脚本模拟，自动化测试组件测试在Vue中需要的包全局安装：babel、mocha、karma等。部分安装的包在下面【测试环境搭建】底部的配置文件中给出。测试环境搭建主要有两个配置，一个是karma的配置文件，一个是karma需要的webpack配置文件。webpack配置文件就是解析需要测试的源文件（vue相关文件），然后识别出来供karma的单元测试用例使用。webpack3配置文件varpath=require("path")varwebpack=require("webpack")varExtractTextPlugin=require('extract-text-webpack-plugin')functionresolve(dir){returnpath.join(__dirname,'..',dir)}varwebpackConfig={module:{rules:[//babel-loader{test:/\.js$/,use:'babel-loader',include:[resolve('src'),resolve('test')]},//为了统计代码覆盖率，在js文件中加入istanbul-instrumenter-loader{test:/\.(js)$/,exclude:/node_modules/,include:/src|packages/,enforce:'post',use:[{loader:"istanbul-instrumenter-loader",options:{esModules:true},}]},//vue加载器{test:/\.vue$/，使用：[{loader:'vue-loader',options:{//为了统计代码覆盖率，在vue文件中添加istanbul-instrumenter-loaderpreLoaders:{js:'istanbul-instrumenter-loader?esModules=true'}}}]},//css加载器{test:/\.css$/,use:ExtractTextPlugin.extract({use:'css-loader',fallback:'vue-style-loader'})},//img加载器{test:/\.(png|gif|jpe?g)(\?\S*)?$/,使用：[{loader:'url-loader'}]},//字体加载器{test:/\.(eot|woff|woff2|ttf|svg)(\?\S*)?$/,使用:[{loader:'url-loader'}]},]},解析:{extensions:['.js','.vue','.json'],别名：{'vue$':'vue/dist/vue.esm.js','@':resolve('src'),//方便调用组件}},plugins:[newwebpack.DefinePlugin({'process.env':{NODE_ENV:'"production"'}})]}module.exports=webpackConfig配置karma文件有两种方式：cd进入当前项目，使用karmainit命令，然后会出现一系列提示选择...不用karmainit命令，新建一个karma.conf.js文件，然后配置：varwebpackConfig=require('../../build/webpack.test.config');module.exports=function(config){config.set({//在其他浏览器中运行：//1.安装相应的karma启动器//http://karma-runner.github.io/0.13/config/browsers.html//2.添加.browsers:['PhantomJS'],frameworks:['mocha','sinon-chai','phantomjs-shim'],reporters:['spec','coverage'],files下面的`browsers`数组:['index.js'],预处理器:{'./index.js':['webpack','sourcemap']},webpackMiddleware:{noInfo:true},//不显示`webpack`打包日志信息webpackServer:{noInfo:true},webpack:webpackConfig,coverageReporter:{dir:'./coverage',reporters:[{type:'lcov',子目录:'.'},{type:'text-summary'}]}})}目录结构├─build│webpack.test.config.js│├─src│├─package.json│└─test└─unit│index.js│karma.config.js│├─coverage│└─specs*.spec.js测试文件放在test/unit下，入口文件为index.js，每个vue组件对应测试用例名称为component名称.spec.js。根据istanbul-instrumenter-loader文档的描述，测试通用入口文件index.js内容如下：importVuefrom'vue'Vue.config.productionTip=false//测试所有带名称的.spec文件以.js结尾//需要所有测试文件（以.spec.js结尾的文件）consttestsContext=require.context('./specs',true,/\.spec$/)testsContext.keys().forEach(testsContext)//需要除main.js之外的所有src文件文件进入覆盖//需要除main.js之外的所有src文件进行覆盖。//你也可以更改它以仅匹配//你想要覆盖的文件子集。constsrcContext=require.context('../../src',true,/^\.\/(?!main(\.js)?$)/)srcContext.keys().forEach(srcContext)最后看下package.json的devDependencies"devDependencies":{..."babel-core":"^6.9.0","babel-loader":"^7.1.1","babel-plugin-syntax-jsx":"^6.18.0","babel-plugin-transform-runtime":"^6.23.0","babel-plugin-transform-vue-jsx":"^3.3.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.0","babel-preset-es2015":"^6.18.0","babel-preset-stage-2":"^6.18.0","babel-runtime":"^6.18.0","chai":"^4.1.2","chalk":"^2.0.1","css-loader":"^0.28.4","extract-text-webpack-plugin":"^2.1.2","istanbul-instrumenter-loader":"^3.0.0","karma":"^1.7.1","karma-coverage":"^1.1.1","karma-mocha":"^1.3.0","karma-phantomjs-launcher":"^1.0.4","karma-phantomjs-shim":"^1.4.0","karma-sinon-chai":"^1.3.2","karma-sourcemap-loader":"^0.3.7","karma-spec-reporter":"0.0.31","karma-webpack":"^2.0.4","mocha":"^3.5.0","phantomjs-prebuilt":"^2.1.15","postcss-px2rem":"^0.3.0","sinon":"^3.2.1","sinon-chai":"^2.13.0",..."style-loader":"^0.18.2","url-loader":"^0.5.7","vue-loader":"^13.0.4","vue-router":"^2.7.0"}，执行命令sudonpminstall安装需要的包注意：当过程进行到下面这一步时，可能需要很长时间，不要按ctrl+c中断下载重新安装，静静等待，开始测试新建一个Hello.vue组件在测试中在/unit/specs目录下创建一个Hello.spec.js文件，然后写一个简单的单元测试用例：importVuefrom'vue'importHellofrom'@/components/Hello'describe('Hello.vue',()=>{it('应该呈现正确的内容',()=>{constConstructor=Vue.extend(Hello)constvm=newConstructor().$mount()expect(vm.$el.querySelector('.helloh1').textContent).to.equal('欢迎使用你的Vue。jsApp')})})在package.json文件中配置：//package.json"scripts":{"test":"karmastarttest/unit/karma.config.js--single-run"}在test/unit/coverage中执行npmruntest输出测试结果并生成测试报告网上的一些测试用例例子...ClickmeclickmeclickmeclickmeclickmeclickmeclickmeclickReact中的组件测试Jest+EnzymeJest：JS单元测试工具，包括DOMAPI支持，断言库，Mock库，etc.包括SpapshotTesting,InstantFeedback等功能Enzyme:通过jQuery风格处理DOM，开发体验非常友好测试环境搭建1.安装一些包npminstalljestenzymebabel-jest--save-dev2。在package.json配置jest:"jest":{"moduleFileExtensions":["js","jsx"],"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"/__mocks__/fileMock.js",".*\\.(css|less|scss)$":"/__mocks__/styleMock.js"},"transform":{"^.+\\.js$":"babel-jest"}},3.添加脚本开始测试："scripts":{"test":"jest"}开始测试1.引入import{shallow}from'enzyme'Enzyme提供了三个方法shallow：浅渲染。它的作用是只渲染到虚拟节点，不会返回到真实节点，可以大大提高测试性能。但是不适合测试包含子组件的组件，需要测试语句周期mount:FullRendering，非常适合DOMAPI中存在的交互组件，或者需要测试组件完整生命周期render:Static渲染，用于将React组件渲染成静态HTML并分析生成的HTML结构。一般shallow就够了，偶尔mount用一下。2.Simulateconstsetup=()=>{//模拟propsconstprops={//Jest提供的mock函数onAddClick:jest.fn()}//通过enzyme提供的shallow（浅层渲染）创建组件constwrapper=shallow()return{props,wrapper}}3.编写测试用例Case1::测试组件是否正常渲染describe('AddTodoView',()=>{const{wrapper,props}=setup();//case1//通过查找Input的存在，测试组件正常渲染it('AddTodoViewComponentshouldberender',()=>{//.find(selector)是Enzyme提供的语法shallowRendering，用于Find节点//详细用法见Enzyme文档http://airbnb.io/enzyme/docs/api/shallow.htmlexpect(wrapper.find('input').exists());})})Case2：输入内容并按下回车键，测试组件调用props方法eventconstmockEvent={keyCode:13,//entereventtarget:{value:'Test'}}//通过Enzymewrapper.find('input').simulate('keyup',mockEvent)//判断props.onAddClick是否调用expect(props.onAddClick).toBeCalled()})生成报告Jest也提供了生成测试覆盖率报告的命令，只需添加--coverage参数即可生成"scripts":{"coverage":"jest--colors--coverage"}写在最后的难点在于测试用例覆盖要周到全面