Molunerfinn / vue-koa-demo

:beginner:A simple full stack demo(CSR & SSR & Docker Support) written by Vue2 & Koa2(Koa1 verson also completed)
MIT License
756 stars 166 forks source link

【单元测试】:全局方法的引入 #41

Closed blackcloud2333 closed 5 years ago

blackcloud2333 commented 5 years ago

如果组件a依赖于组件b,组件b依赖于全局的方法(此全局方法为自己封装的),那么如何才能引入此全局方法,完成单元测试呢? ps:因为客观原因,无法把此全局方法打包出来 尝试的解决方案: const video = require('../../src/module/tools/index.js') 1 Vue.use(video) 不能成功,因为index.js不是npm包,所以没办法识别 2 把index方法挂载到全局,但是依然没有生效,求教大佬解决方案

Molunerfinn commented 5 years ago

不是很明白你的全局方法具体是啥,Vue.use并不关心是不是npm包啊...

全局挂载就是正常挂载就行了: https://github.com/Molunerfinn/vue-koa-demo/blob/master/test/client/login.spec.js#L31

blackcloud2333 commented 5 years ago

引用关系是这样的 组件b<-组件a<-全局方法 全局方法获取X属性 组件a根据X属性确定本身组件当中的某些部分是否显示 组件b引入组件a

现在的问题: 【期望】测试组件b,并且能正确断言组件b当中某个类是否存在 【测试部分代码】: `import Vue from 'vue' import { shallowMount } from '@vue/test-utils' import login from '@/views/login/login.vue' import szheader from '@/components/szHeader.vue' const tools = require('../../src/module/tools/index.js') Vue.use(szheader) Vue.prototype.tools = tools

let wrapper beforeEach(() => { let value = { mobile: '', // 用户输入的手机号码 graphCode: '', // 图形验证码 verifyCode: '', // 短信验证码 graphCodeImg: '', // 图形验证码url showGraphCode: false, // 是否展示验证码 currentTimer: 60, // 收到验证码后的等待时间 timerId: '', // 监听等待时间的id sendVerifyCodeText: '获取验证码', // 发送验证码btn按钮文案 canSendVerifyCode: true, // 是否能发送验证码 canLogin: true, // 是否能点击登录按钮 backUrl: '' // 指定的返回链接 } wrapper = shallowMount(login) wrapper.setData(value) })

test('应该有一个类', () => { const szpage = wrapper.find('.sz-page') expect(szpage).toBeTruthy() }) ` 【报错】:组件szheader当中判断ua类型,但是读取不到ua.app属性 TypeError: Cannot read property 'app' of undefined 不知道这样的描述是否清楚 【另外】ua的获取已经做了兜底策略,如果没有获取到,或者获取到undefined,那么就默认设置{os:'',app:''}

Molunerfinn commented 5 years ago

抱歉我也不太清楚为什么

blackcloud2333 commented 5 years ago

目前找到的解决方案: 【原因】$ua是挂在全局上的,因此只要在隔离的vue组件上挂载此方法,就可以满足需求 【方法】: const localVue = createLocalVue() // 创建一个Vue实例 localVue.prototype.$ua = { app: '' }

Molunerfinn commented 5 years ago

点赞!