将sinon与vue-test-utils结合使用以检测是否执行了Component方法

时间:2019-06-27 13:45:07

标签: javascript vue.js mocha sinon vue-test-utils

我有一个看起来像这样的组件:

export default {
  name: 'set-dimensions',
  data() {
    return {
      height: null,
      radius: null,
      width: null,
    };
  },
  mounted() {
    this.init();
  },
  beforeDestroy() {
    this.$events.$off('dimensions-change', this.updateThing);
  },
  methods: {
    init() {
      this.$events.$on('dimensions-change', this.updateThing);
    },
    updateThing({ w, h, r }) {
      this.radius = r;
      this.width = w;
      this.height = h;
    },
  },
};

,并且我试图检测到在卸载(销毁)组件后,执行了updateThing方法。 (失败)

const factory = async () => {
  const wrapper = mount(SetDimensions, {
    localVue,
    sync: false,
  });
  await wrapper.vm.$nextTick();
  return wrapper;
};

然后发出事件并尝试查看该方法是否已执行:

beforeEach(async () => {
    wrapper = await factory();
    methodStub = sinon.spy(wrapper.vm, 'updateThing');
  });



 it('should trigger updateThing when event emmitted', async () => {
    wrapper.vm.$events.$emit('dimensions-change', {
      r: 111,
      w: 222,
      h: 333,
    });
    await wrapper.vm.$nextTick();
    expect(methodStub.calledOnce).to.equal(true); // it fails
  });

  it('should remove event listener when component destroyed', () => {
    wrapper.destroy();
    wrapper.vm.$events.$emit('dimensions-change', {
      r: 111,
      w: 222,
      h: 333,
    });
    expect(methodStub.calledOnce).to.equal(false); // it passes but it also passes when I comment out wrapper.destroy() so actually it's not working properly
  });

0 个答案:

没有答案