模拟 Vue 方法外部异步调用来测试它

Question

尝试测试具有外部 API 调用的 Vue 组件方法以及返回我试图模拟的 Promise 的响应。这是我在删除其他细节后得到的：

    Component.vue 

    import UserAPI from '../../mixins/UserAPI'

    export default {
       mixins:
          UserAPI
       ,
       methods:

          AddUserInfo(id){     

            if (this.$options.cachedUsers.length === 0 || (!this.$options.cachedUsers.map(u => u.userId.includes(id))
            {        
               this.fetchUserById(id)   <--this is a call I am trying to mock
               .then( user=> {
                   if (user)
                   {
                       this.$options.cahedUsers.push(user);
                   }
               }) 
               .fail( errors => {
                   throw Errors(error)
               });
            }
            return this.$options.cachedUsers.find(el => el.id === id);
         } 
}

Component.spec.js

     it('should add users', () => {
        wrapper.vm.$options.cachedUsers = [];

        const response = { userId: "5ebdae27eb5311e0f7d2f511", userName: "admin", displayName: "Administrator" };
        wrapper.vm.fetchUserById = (id) => {
            return {
                then: () => jest.fn(usr => wrapper.vm.$options.cachedUsers.push(response)),
                fail: () => jest.fn(errors => { })
            };
        };
        status = wrapper.vm.AddUserInfo(user);
        expect(wrapper.vm.$options.cachedUsers.length).toBe(1);
 });

但是，我收到了来自测试运行程序的错误：this.fetchUserById(...).then(...).fail is not a function，这意味着我可能没有正确地模拟它。我需要修改什么才能使这个测试变为绿色？

Answer 1

方法被错误地模拟了，因为它们返回函数。为了可链接，方法应该返回this，这需要在没有箭头的情况下完成：

{
    then: jest.fn(function (usr) {
      return this;
    }),
    fail: jest.fn(function (errors) { ... })
}

在模拟方法中执行wrapper.vm.$options.cachedUsers.push(response) 没有意义，因为这已经在原始方法中完成了。

fetchUserById 似乎返回 jQuery deferred，结果可以用 deferred 来模拟。后者在大多数情况下的行为类似，但需要将 catch 重命名为 fail。 AddUserInfo 的问题在于它不返回一个承诺（延迟），这是一个反模式。应该是：

AddUserInfo(id){             
  return this.fetchUserById(id) ...
}

还有：

const deferred = $.Deferred().resolve(mockUser);
wrapper.vm.fetchUserById = jest.fn().mockReturnValue(deferred);
wrapper.vm.AddUserInfo(user);
await deferred;
expect(wrapper.vm.$options.cachedUsers.length).toBe(1);