对使用依赖项的 vue 组件进行单元测试答案

【问题标题】：Unit testing a vue component that uses dependency对使用依赖项的 vue 组件进行单元测试
【发布时间】：2020-09-22 00:00:21
【问题描述】：

我正在尝试测试使用外部依赖项的 SiWizard 组件。它从 syncfusion 库中导入模块。

SiWizard.vue 导入

import SiFooter from "@/components/subComponents/SiFooter.vue";
import { Prop, Component, Vue } from "vue-property-decorator";
import { TabPlugin, TabComponent, SelectingEventArgs } from "@syncfusion/ej2-vue-navigations";
import { VNode } from "vue";

Vue.use(TabPlugin);

这就是我的测试的样子，使用 vue js 测试 utils 和 jest。为了简单起见，我的测试用例应该通过并配置一个 prop。

siWizard.spec.ts

import { shallowMount, Wrapper } from "@vue/test-utils";
import SiWizard from "../../src/components/SiWizard.vue";

let wrapper: Wrapper<SiWizard & { [key: string]: any }>;

describe("testing SiWizard", () => {
  test("Test add mode", () => {
    wrapper = shallowMount(SiWizard, {
      propsData: {
        mode: "add"
      }
    });

    expect(true).toBe(true)
  });

运行 siWizard.spec.ts 时出现奇怪的错误。 Error without mocking, test still passes

我的猜测是测试环境中的属性无法访问 SiWizard 组件中使用的依赖属性。因此，我必须使用 Jest 来模拟 TabPlugin。所以我尝试使用 jest.mock 来模拟依赖。

import { shallowMount, Wrapper } from "@vue/test-utils";
import SiWizard from "../../src/components/SiWizard.vue";

// import { TabPlugin } from "@syncfusion/ej2-vue-navigations";

jest.mock("../../node_modules/@syncfusion/ej2-navigations" , () => { jest.fn() });

let wrapper: Wrapper<SiWizard & { [key: string]: any }>;

describe("testing SiWizard", () => {
  test("Test add mode", () => {
    wrapper = shallowMount(SiWizard, {
      propsData: {
        mode: "add"
      }
    });

    expect(true).toBe(true)
  });

导致测试失败并给出以下错误Error and failing test

我不确定我是否需要模拟任何东西，因为我的第一个测试仍然通过，但它只会给我错误。谁能告诉我我是正确模拟还是需要做其他事情？

【问题讨论】：

标签： typescript unit-testing vue.js syncfusion ej2-syncfusion

【解决方案1】：

在你的测试文件顶部添加： jest.mock("../../node_modules/@syncfusion/ej2-navigations")

【讨论】：

【解决方案2】：

很抱歉延迟回复您。

我们已经检查了您报告的问题，并且最终能够重现它。我们正在检查解决此问题的可能方法，并随时通知您其详细信息。在此之前，我们要求您使用 Mocha 的 karma 单元测试，您可以从以下链接下载示例项目。

示例：https://www.syncfusion.com/downloads/support/directtrac/general/ze/sync-vue-ts-karma-1195414389

代码片段：

NPM 包：

npm install --save-dev karma karma-chrome-launcher karma-mocha karma-sourcemap-loader karma-spec-reporter karma-webpack mocha

./tests/unit/example.spec.ts

import { expect } from 'chai'
import Vue from "vue";
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {
  let vm: any;
  let dropdown: any;
  beforeEach(() => {
    vm = new Vue({
      el: document.createElement("div"),
      render(h) {
        return h(HelloWorld);
      },
    });
    dropdown = vm.$children[0].$refs.dropdownElement;
  });

  afterEach(() => {
    vm.$destroy();
  });


  it('checking default value of dropdown', () => {
    expect(dropdown.value).to.equal('Badminton');
  })

  it('changing the value of dropdown', () => {
    let vm1: any = vm.$children[0].$data;
    vm1.selectedValue = 'Cricket';
    Vue.set(vm1, 'selectedValue' , 'Cricket');
    Vue.nextTick().then(()=>{
      expect(dropdown.value).to.equal('Cricket');
    });
  })

})

如果您在这方面需要任何进一步的帮助，请与我们联系。

【讨论】：