Question

在单元测试我的组件时使用Sinon来存储API调用（使用TypeScript和vue-class-component编写）。将存根添加到单元测试后，仍然会调用原始方法（不返回存根值）。

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'
  });
});

我尝试存根的方法在组件中的mounted上调用，并设置文本内容。任何帮助将不胜感激，谢谢！

Answer 1

问题在于，当使用带有vue-class-component的TypeScript类时，methods存在于导出类的options属性中，因此要存根方法，您必须这样做像这样：

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

如果您的测试通过了更改，请忽略下面的所有内容。

我在代码中看到了几个不相关的问题：

使用PhantomJS时，使用async毫无意义，因为Vue.nextClick无论如何都不会使用Promises;使用mocha提供的done函数更简单：
```
it('...', (done) => {
  // ...
  Vue.nextTick(() => {
    // ...
    done()
  }
}
```
chai的be是一个链条，不测试平等;应使用equal，例如：expect(foo).to.equal('bar')。
最好将vm作为变量而不是属性，以避免引用头痛：
```
const vm = //...
nextTick(() => { expect(vm.$el)//... }
```

Vue.JS单元测试 - 使用sinon.stub（）后仍在调用原始方法

1 个答案: