在 TDD 期间模拟 Vue 实例的方法 [英] Mocking methods on a Vue instance during TDD
本文介绍了在 TDD 期间模拟 Vue 实例的方法的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在构建我的 Vue 应用程序的同时学习 TDD，并试图遵守只编写足够的生产代码以满足失败的单元测试的严格规则.我真的很喜欢这种方法，但在向 Vue 实例添加方法以及测试当事件从模板中的元素触发时它们已被调用时遇到了障碍.
我找不到关于如何模拟 Vue 方法的任何建议，因为如果我模拟代理方法，它最终不会被调用(我正在使用 Jest 和 Vue Test Utils).
我也在使用 Cypress，所以我可以在 e2e 中填写这个测试，但我希望能够通过单元测试尽可能多地覆盖.
我拥有测试 Vue.js 应用程序"一书.由 Edd Yerburgh 撰写，但在有关测试组件方法的部分中，他只是陈述了以下内容:
<块引用>通常，组件在内部使用方法.例如，当单击按钮时登录到控制台 [...] 您可以将这些视为私有方法——它们不打算在组件之外使用.私有方法是实现细节，所以你不要直接为它们编写测试.
这种方法显然不允许遵循更严格的 TDD 定律，那么 TDD 纯粹主义者如何处理这个问题?
ButtonComponent.vue
<button @click="method">点击我</button><脚本>导出默认值:{方法: {方法 () {//我被叫了吗?}}}ButtonComponent.spec.js
it('点击时会调用该方法', () => {const 包装器 = 浅安装(按钮组件)const mockMethod = jest.fn()wrapper.vm.method = mockMethodconst button = wrapper.find('button')button.vm.$emit('点击')期望(模拟方法).toHaveBeenCalled()//预期的模拟函数已被调用，但没有被调用}) 解决方案
Solution 1: jest.spyOn(Component.methods, 'METHOD_NAME')
您可以使用 jest.spyOn 在挂载前模拟组件方法:
从 '@/components/MyComponent.vue' 导入 MyComponent描述('我的组件'，()=> {it('点击做某事', async () => {const mockMethod = jest.spyOn(MyComponent.methods, 'doSomething')等待shallowMount(MyComponent).find('button').trigger('click')期望(模拟方法).toHaveBeenCalled()})})解决方案 2:将方法移动到可以模拟的单独文件中
官方 ;将困难的部分抽象化"，并使用 Jest 的各种模拟机制 模拟被测组件调用的抽象模块.
例如，要验证调用了 click-handler:
- 将
click处理程序的主体移动到共享的 JavaScript 文件中. - 将共享模块导入被测组件和您的测试中(确保在两种情况下使用相同的导入路径).
- 调用
jest.mock()来模拟共享模块的导出函数. - 在测试套件的
beforeEach().这可能仅在套件中有多个测试时才有必要.
//@/components/MyComponent/utils.js导出函数 doSomething() {/*...*/}//1️⃣//@/components/MyComponent/MyComponent.vue (
