Vue.js “如何在方法中使用Jest测试函数”；"；VueJS

我想尝试调用一个已经被模拟的函数。我将vueJS用于frond和Jest作为单元测试。下面是我的代码示例。我的目的是测试«anotherFunction»的调用。第一个测试成功，而不是第二个。感谢您的帮助或建议

代码vueJS:

   mounted() {
          this.myfunction();
    }
    methods: {
          myfunction() {
              this.anotherFunction();
          }
   }

笑话代码：

describe('Home.vue', () => {
   let wrapper = null;

   const options = {
       mocks: {
           $t: () => 'some specific text',
       },
       methods: {
           myFunction: jest.fn(),
       },
   };

   it('Should renders Home Component', () => {
       // Given        
       wrapper = shallowMount(Home, options);
       // Then
       expect(wrapper).toBeTruthy();
   });

   it('Should call anotherFunction', async (done) => {
       // Given
       wrapper.vm.anotherFunction = jest.fn().mockResolvedValue([]);
       // When
       await wrapper.vm.myFunction();
       // THIS THE PROBLEM, myFunction is mocked and I can't call the function 'anotherFunction' inside...
       // Then
       // expect(wrapper.vm.anotherFunction).toHaveBeenCalled();
   });

});

---

我正在寻找一种很好的方法来帮助您解决这个测试用例。因此，我在下面的chuck代码中思考：

从'@vue/test-utils'导入{mount}；
描述（'Home'，（）=>{
它（'方法调用测试用例'，（）=>{
const anotherMethodMock=jest.fn（）；
包装=安装（主{
方法：{
anotherMethod:anotherMethodMock
}
});
expect（anotherMethodMock）.tohavebeincall（）；
});
});

但是，该笑话引发了以下异常：

[vue测试utils]：通过methods属性覆盖方法已被弃用，并将在下一个主要版本中删除。对于

方法

属性，没有明确的迁移路径-Vue不支持任意替换方法，VTU也不应。要存根复杂方法，请从组件中提取它并对其进行隔离测试。否则，将建议重新考虑这些测试。

我有以下见解，也许在这种情况下，应该更好地测试这种

anotherMethod

调用的副作用。它发生了什么变化？有什么东西显示给用户了吗

我相信我们从错误的概念开始

---

我希望这篇技巧会有用：）

我正在寻找一种很好的方法来帮助您处理这个测试用例。因此，我在下面的chuck代码中思考：

从'@vue/test-utils'导入{mount}；
描述（'Home'，（）=>{
它（'方法调用测试用例'，（）=>{
const anotherMethodMock=jest.fn（）；
包装=安装（主{
方法：{
anotherMethod:anotherMethodMock
}
});
expect（anotherMethodMock）.tohavebeincall（）；
});
});

但是，该笑话引发了以下异常：

[vue测试utils]：通过methods属性覆盖方法已被弃用，并将在下一个主要版本中删除。对于

方法

属性，没有明确的迁移路径-Vue不支持任意替换方法，VTU也不应。要存根复杂方法，请从组件中提取它并对其进行隔离测试。否则，将建议重新考虑这些测试。

我有以下见解，也许在这种情况下，应该更好地测试这种

anotherMethod

调用的副作用。它发生了什么变化？有什么东西显示给用户了吗

我相信我们从错误的概念开始

---

我希望这个技巧可能有用：）

您必须只模拟另一个函数，并测试myFunction调用是否调用了您模拟的另一个函数。您能给我一个例子吗？如果我删除行

方法：{myFunction:jest.fn（）}

I收到此错误：TypeError:无法读取未定义的属性'apply'，我使用sinon进行模拟和验证，因此无法给出确切的示例。能否显示此错误的stacktrace？

TypeError:无法读取VueComponent.mappedAction（node_modules/vuex/dist/vuex.common.js:937:20）中未定义的属性'apply'在VueComponent.vue的VueComponent.SearchAdvertisions（src/components/ListJobs.vue:792:14）在VueComponent.vue（node_modules/vue/dist/vue.runtime.common.dev.js:1850:57）在VueComponent.vue（node_modules/vue/dist/vue.runtime.common.dev.js:4201:7）的callHook（node_modules/vue/dist/ListJobs.js:4201:7）在VueComponent（node_modules/vue/dist/vue.runtime.common.dev.js:4983:5）在这个stacktrace中的新VueComponent

中，SearchAdvertisions是“myFunction”的名称。您只需模拟另一个函数，并测试myFunction调用是否调用了被模拟的另一个函数。您能给我一个例子吗？如果我删除

methods:{myFunction:jest.fn（）}

I收到此错误：TypeError:无法读取未定义的属性'apply'，我使用sinon进行模拟和验证，因此无法给出确切的示例。能否显示此错误的stacktrace？

TypeError:无法读取VueComponent.mappedAction（node_modules/vuex/dist/vuex.common.js:937:20）中未定义的属性'apply'在VueComponent.vue的VueComponent.SearchAdvertisions（src/components/ListJobs.vue:792:14）在VueComponent.vue（node_modules/vue/dist/vue.runtime.common.dev.js:1850:57）在VueComponent.vue（node_modules/vue/dist/vue.runtime.common.dev.js:4201:7）的callHook（node_modules/vue/dist/ListJobs.js:4201:7）在VueComponent（node_modules/vue/dist/vue.runtime.common.dev.js:4983:5）在新的VueComponent上

在此stacktrace中，SearchAdvertisions是“myFunction”的名称