Unit testing a vue component that uses dependency

Question

I'm trying to test my SiWizard component that uses external dependencies. It imports modules from the syncfusion library.

SiWizard.vue imports

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

And this is what my test looks like, using vue js test utils and jest. Just to keep things simple my test case should pass and configured a single 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)
  });

When running the siWizard.spec.ts I get weird errors. Error without mocking, test still passes

My guess is that properties in the test environment can't access the dependency properties used in the SiWizard component. Therefor I have to mock the TabPlugin using Jest. So I tried to mock the dependency using 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)
  });

Resulting in a test that fails and giving the following error Error and failing test

I'm not sure if I need to mock anything because my first test still passes but it only gives me errors. Can anyone tell me if I mock correctly or do I need to do something else?

score 0 · Answer 1 · answered Jun 05 '20 at 14:08

0

Add at the top of ur test file: jest.mock("../../node_modules/@syncfusion/ej2-navigations")

answered Jun 05 '20 at 14:08

Jahson

139
2
14

score -2 · Answer 2 · answered Jun 15 '20 at 13:08

Sorry for the delay in getting back to you.

We have checked your reported issue and we are able to reproduce it in our end. We are checking the possible way to fix this and keep you informed about its details. We request you to use karma unit testing with Mocha until then and you can download the sample project from the below link.

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

Code Snippet:

NPM Packages:

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

})

Please get back to us if you need any further assistance on this.

Unit testing a vue component that uses dependency

2 Answers2