Vue.JS Unit Testing - La méthode originale est toujours appelée après l'utilisation de sinon.stub()

Question

J'utilise Sinon pour rompre les appels d'API lors du test unitaire de mes composants (écrit avec TypeScript et vue-class-component). Après l'ajout du talon au test unitaire, la méthode d'origine est toujours appelée (ne renvoyant pas la valeur stubbed).

it('should set the text to bar', async() => { 

    const stubbedApiResponse =() => { 
    return 'bar'; 
    }; 

    sinon.stub(MyComponent.prototype, 'getFoo').callsFake(stubbedApiResponse); 

    let options = { 
    template: '<div><my-component></my-component></div>', 
    components: {'my-component': MyComponent}, 
    store: this.store 
    }; 
    this.vm = new Vue(options).$mount(); 

    Vue.nextTick(() => { 
    expect(this.vm.$el.querySelector('.text').textContent).toBe('bar'); // Still equals 'foo' 
    }); 
}); 

La méthode que je tente de stub est appelé mounted dans le composant et définit le contenu du texte. Toute aide serait appréciée Merci!

Answer 1

Le problème était que, lors de l'utilisation des cours tapuscrit avec vue-class-component, le methods en direct dans la propriété options de vous faire comme si la classe exportée, à Stub une méthode, ceci:

sinon.stub(MyComponent.options.methods, 'getFoo').callsFake(stubbedApiResponse) 

En Si votre test réussit à faire ce changement, ignorez tout ce qui suit.

---

Je vois quelques problèmes non liés dans le code:

• Lorsque vous utilisez PhantomJS, alors il est inutile d'utiliser async depuis Vue.nextClick n'utilisera Promises de toute façon; il est plus simple d'utiliser la fonction done fournie par mocha:

  it('...', (done) => { 
      // ... 
      Vue.nextTick(() => { 
      // ... 
      done() 
      } 
  } 
  

• de chai be est une chaîne et ne teste pas pour l'égalité; equal doit être utilisé, par exemple: expect(foo).to.equal('bar').

• Il est préférable de laisser vm comme une variable au lieu d'une propriété pour éviter les maux de tête référentielles:

  const vm = //... 
  nextTick(() => { expect(vm.$el)//... }