无法使用 nuxt 和 jest 模拟服务

Posted 2023-02-22

【中文标题】无法使用 nuxt 和 jest 模拟服务

【英文标题】：Unable to mock service with nuxt and jest

【发布时间】：2021-09-14 11:55:17

【问题描述】：

我有一个名为 External.vue 的组件，其中包含一个带有 props 的按钮，并且每次单击它时都会触发一个 Google Analytic 事件。

<template>
  <div>
    <button
      ref="ctaButtonExternalElement"
      type="submit"
      @click="fireEvent"
    >
      <a
        ref="ctaButtonExternalLinkElement"
        :class="ctaColour"
        class="block rounded-md border border-transparent px-4 py-3 font-medium shadow focus:outline-none focus:ring-2 focus:ring-offset-2 sm:px-6"
        :href="ctaLink"
      >
         ctaTitle 
      </a>
    </button>
  </div>
</template>


<script>
export default 
  props: 
    ctaTitle: 
      required: true,
      type: String,
    ,
    ctaLink: 
      required: true,
      type: String,
    ,
    ctaColour: 
      required: false,
      type: String,
      default: 'bg-blue-500 hover:bg-blue-700 focus:ring-blue-500',
    ,
    event: 
      required: false,
      type: Object,
      default: function() 
        return ;
      ,
    ,
  ,

  methods: 
    fireEvent() 
      if (this.event != null) 
        return this.$ga.event(
          eventCategory: this.event.event_category,
          eventAction: this.event.event_action,
          eventLabel: this.event.event_label,
          eventValue: this.event.event_value,
        );
      
    ,
  ,
;
</script>

如您所见，this.$ga 是由 nuxt 自动注入的，在我们的测试中，我们想要加载组件，因此我们想要注入 $ga 或者拥有它的模拟版本。

import mount from '@vue/test-utils';
import External from './External';
import ga from '@nuxtjs/google-analytics';
import jest from '@jest/globals';

describe('Test External Button', () => 
  test('should mock google analytics', async () => 
    const $ga = ga: 
      event: jest.fn(),
    ;

    const wrapper = mount(External, 
      propsData: props,
      mocks: 
        $ga,
      ,
    );

    const button = wrapper.getComponent(ref: 'ctaButtonExternalElement');
    button.trigger('click');

    expect($ga).toHaveBeenCalled();
  );
);

当我运行这个测试时，我得到了这个错误：

 Test External Button › should mock google analytics

    expect(received).toHaveBeenCalled()

    Matcher error: received value must be a mock or spy function

    Received has type:  object
    Received has value: "ga": "event": [Function mockConstructor]

Error in v-on handler: "TypeError: this.$ga.event is not a function"

还有嘲笑$ga的方法吗？

【参考方案1】：

您的模拟看起来不正确。 $ga 没有 ga 属性，因此应该从模拟中删除。

//const $ga = ga: 
//  event: jest.fn(),
//;

const $ga = 
  event: jest.fn(),
;

然后您会验证调用的是 $ga.event，而不是 $ga。还应等待 click-event 触发器，因为直到下一个滴答声才会调用 click-handler：

//button.trigger('click');
//expect($ga).toHaveBeenCalled();

await button.trigger('click');
expect($ga.event).toHaveBeenCalled();

【讨论】：

成功了！完全没有错误。谢谢托尼

@oliviaatkinson 很高兴能帮上忙！请记住mark the answer as accepted，因为它解决了问题。 :)