前端自动化测试（四）

在Vue项目中测试组件时会引用全局组件，那么如何处理这些全局组件呢？Vue还有一个很重要的点就是如何测试Vuex？1.测试时使用VueRouter1.1存根。当你的组件引用全局组件router-link或者router-view组件时，当我们使用shallowMount渲染时，会提示找不到这两个组件。我们可以使用stub方法来mockRemove相关组件。importNavfrom"@/components/Nav.vue";import{shallowMount}from"@vue/test-utils";it("TestNavcomponent",()=>{letwrapper=shallowMount(Nav,{//忽略这两个组件存根:['router-link','router-view'],mocks:{//将一些数据模拟到Nav组件中$route:{path:'/'}}});expect(wrapper.find('h1').text()).toContain('/')});类似的：我们可以mock一些全局的组件，我们也可以mock一些参数传给组件。1.2安装VueRouter我们也可以创建一个localVue来安装VueRouter，传入组件中进行渲染。安装VueRouter后，两个只读属性$route和$router将添加到Vue的原型中。所以不要把它挂载在基本的Vue构造函数上，也不能通过mocks参数constlocalVue=createLocalVue();localVue.use(VueRouter);it("TestNavcomponent",()=>{letrouter=newVueRouter({routes:[{path:'/',component:Home},{path:'/about',component:About}]});letwrapper=mount(Nav,{localVue,路由器});router.push('/about');expect(wrapper.find('h1').text()).toMatch(/about/)});2.Vuex测试我们通过一个反例来掌握如何测试Vuex。writestore/index.jsimportVuefrom'vue'从'vuex'导入Vuex从'./配置'Vue.use(Vuex)exportdefaultnewVuex.Store(config)writestore/mutations.jsexportdefault{increment(state,count){state.number+=count}}writestore/actions.jsexportdefault{increment({commit},count){setTimeout(()=>{commit("增量",count);},1000);}};从“./mutations”写入store/config.jsimport突变；从“./actions”导入动作；exportdefault{state:{number:0},mutations,actions};这里就不详细解释vuex的执行过程了，直接开始测试！2.1单元测试store我们可以直接对store中的方法一一进行单元测试。就是一个一个的测试函数，但是需要用mock来commit和dispatch方法。从'../mutations'导入突变；从'../actions'导入动作；jest.useFakeTimers();it('testmutation',()=>{conststate={number:0};mutations.increment(state,2);expect(state.number).toBe(2);});it('测试动作',()=>{letcommit=jest.fn();actions.increment({commit},2);jest.advanceTimersByTime(2000);expect(commit).toBeCalled();expect(commit.mock.calls[0][1]).toBe(2);});2.2测试操作的store是生成一个store测试的好处是不需要mock任何方法。importVuexfrom'vuex';import{createLocalVue}from'@vue/test-utils'importconfigfrom'../config';jest.useFakeTimers();it('测试是否可以异步自增1',()=>{letlocalVue=createLocalVue();localVue.use(Vuex);letstore=newVuex.Store(config);//创建一个正在运行的商店expect(store.state.number).toBe(0);store.dispatch('increment',2);jest.advanceTimersByTime(2000);//提前2sexpect(store.state.number).toBe(2);});每次测试最好clone一个config文件，保证每个用例互不干扰！2.3将测试组件中的Vuexmockstore传入组件中，看是否能按预期调用函数。从'vuex'导入Vuex；从'@/components/Counter'导入计数器；从'@vue/test-utils'导入{createLocalVue,shallowMount}让localVue=createLocalVue();localVue.use(Vuex);让商店;letactions;beforeEach(()=>{actions={increment:jest.fn()}store=newVuex.Store({actions,state:{}});});it('测试按钮是否被点击在组件中Can1',()=>{letwrapper=shallowMount(Counter,{localVue,store});wrapper.find('button').trigger('click');//测试increment方法是否actions正常运行Callexpect(actions.increment).toBeCalled();})Vuex测试的方式我们这里已经说明了。其实前端自动化测试并没有想象中那么难。您可以通过大量练习完全掌握它！过往回顾：前端自动化测试（一）前端自动化测试（二）前端自动化测试（三）希望大家多多关注公众号【前端首选】，有什么想法和意见都欢迎讨论交流！连续四天的连载到此告一段落，祝大家中秋节快乐！