项目环境搭建运行vuecreate[project-name]新建项目。选择“Manuallyselectfeatures”和“UnitTesting”，以及“Jest”作为测试运行器。安装后，cd进入项目目录并运行yarntest:unit。通过jest配置文件：\jest.config.js==>node_modules\@vue\cli-plugin-unit-jest\jest-preset.js==>\node_modules\@vue\cli-plugin-unit-jest\presets\default\jest-preset.jsjest-preset.js文件是Vue项目创建后默认的jest配置文件：module.exports={//可加载模块的后缀名moduleFileExtensions:['js','jsx','json',//tellJesttohandle*.vuefiles'vue'],//转换方法transform:{//process*.vuefileswithvue-jest//如果.vue结尾，使用vue-jest转换'^。+\\。vue$':require.resolve('vue-jest'),'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':require.resolve('jest-transform-stub'),'^.+\\.jsx?$':require.resolve('babel-jest')},//转换时忽略文件夹transformIgnorePatterns:['/node_modules/'],//supportthesame@->srcaliasmappinginsourcecode//webpack的别名映射转换moduleNameMapper:{'^@/(.*)$':'/src/$1'},//指定测试环境为jsdomtestEnvironment:'jest-environment-jsdom-fifteen',//serializerforsnapshots//Snapshotserializer//使用jest-serializer-vue序列化组件快照//就是把组件转成字符串，后面再进行快照测试，可以看snapshotSerializers:['jest-serializer-vue'],//测试代码文件在其中testMatch:['**/tests/unit/**/*.spec.[jt]s?(x)','**/__tests__/*.[jt]s?(x)'],//https://github.com/facebook/jest/issues/6766testURL:'http://localhost/',//手表模式下的watchPlugins:[require.resolve('jest-watch-typeahead/filename'),require.resolve('jest-watch-typeahead/testname')]}快速体验默认测试用例：tests\unit\example.spec.js//tests\unit\example.spec.js//importcomponentmounter,不需要手动编写vue入口import{shallowMount}from'@vue/test-utils'//导入要测试的组件importHelloWorldfrom'@/components/HelloWorld.vue'describe('HelloWorld.vue',()=>{它('rendersprops.msgwhenpassed',()=>{constmsg='newmessage'constwrapper=shallowMount(HelloWorld,{props:{msg}})expect(wrapper.text()).toMatch(msg)})})$npmruntest：单元搭建了基本的Vue测试环境。在正式开始Vue测试之前，我们先了解一下测试开发的方法。测试开发方法测试不仅可以验证软件功能，保证代码质量，而且会影响软件开发的模式。测试开发有两个流派：TDD：测试驱动开发，先写测试再实现功能BDD：行为驱动开发，先实现功能再写测试的核心实践和技术，以及软件设计方法论。它的原则是先写测试用例再写代码，测试决定我们的代码。而且TDD需要编写比较独立的测试用例，比如只测试一个组件的某个功能点，某个效用函数等。TDD开发流程：编写测试用例，运行测试，编写代码，通过重构/优化代码使测试增加新功能，重复以上步骤//tests\unit\example.spec.js//importcomponentmounter，无需手动writevueentryimport{shallowMount}from'@vue/test-utils'//导入要测试的组件importHelloWorldfrom'@/components/HelloWorld.vue'import{add}from'@/utiles/math.js'//Input:1,2//Output:3test('sum',()=>{expect(add(1,2)).toBe(3)})简单的运行测试代码肯定会报错。有了测试代码，为了能通过测试，更具体的在math模块中写add()方法：//math.jsfunctionadd(a,b){returna+b}exportdefaultaddVue3TDDtestcasesrc\components\TodoHeader.vue组件内容Testcase:tests\unit\example.spec.js//导入组件挂载器，无需手动编写vue入口import{shallowMount}from'@vue/test-utils'//导入待测组件importHelloWorldfrom'@/components/HelloWorld.vue'importTodoHeaderfrom'@/components/TodoHeader.vue'test('unit:newtodo',async()=>{constwrapper=shallowMount(TodoHeader)//挂载渲染组件constinput=wrapper.find('[data-testid="todo-input"]')//查找输入//为输入设置一个值consttext='helloworld'awaitinput.setValue(text)//触发事件awaitinput.trigger('keyup.enter')//==========//上面就是具体的操作了，输入完内容后回车，你想做什么呢？↓👇//=========//验证应该发布一个外部的new-todo事件expect(wrapper.emitted()['new-todo']).toBeTruthy()//验证是否export事件的参数为传入值expect(wrapper.emitted()['new-todo'][0][0]).toBe(text)//验证文本框内容是否清晰expect(input.element.value).toBe('')})src\components\TodoHeader.vue组件内容exportdefault{data(){return{inputValue:''}},methods:{handleNewTodo(){if(this.inputValue.trim().length){//释放外部new-todo事件值作为文本框的输入内容this.$emit('new-todo',this.inputValue)this.inputValue=''}}}};
