[Vuejs]-Unit testing a vue component that uses dependency

0👍

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

👤Jahson

-2👍

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.

Leave a comment