Модульное тестирование компонента vue, использующего зависимости

Question

Я пытаюсь протестировать свой компонент 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 test utils и jest. Для простоты мой тестовый пример должен пройти и настроить одну опору.

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 я получаю странные ошибки. Ошибка без издевательства, тест все равно проходит

Я предполагаю, что свойства в тестовой среде не могут получить доступ к свойствам зависимостей, используемым в компоненте SiWizard. Поэтому я должен издеваться над TabPlugin с помощью Jest. Поэтому я попытался имитировать зависимость с помощью 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)
  });

Результат теста, который не проходит и выдает следующую ошибку Ошибка и неудачный тест

Я не уверен, нужно ли мне что-то имитировать, потому что мой первый тест все еще проходит, но дает мне только ошибки. Кто-нибудь может сказать мне, правильно ли я издеваюсь или мне нужно что-то еще делать?

Answer 1

Добавьте вверху тестового файла ur:jest.mock("../../node_modules/@syncfusion/ej2-navigations")

Answer 2

Приносим извинения за задержку с ответом.

Мы проверили проблему, о которой сообщили, и можем воспроизвести ее со своей стороны. Мы изучаем возможные способы решения этой проблемы и информируем вас о деталях. Мы просим вас использовать модульное тестирование кармы с Mocha до тех пор, и вы можете загрузить образец проекта по ссылке ниже.

Пример: 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');
    });
  })

})

Если вам потребуется дополнительная помощь, обратитесь к нам.