CODEWITHSUNDEEP
javascriptvue.jsunit-testingjestjs
Bhanu Prakash War
Bhanu Prakash War

Reputation: 168

Unit testing vuejs methods using Jest

I'm trying to test the methods in jest framework. For javascript methods i was able to import the methods from file using require() function and test it (expect(addition(1,2).toBe(3))). But unable to replicate the same in VueJS methods.

  // VueJS
  export default defineComponent({
  name: "App",
  components: {
    HelloWorld,
  },
  methods: {
    addition(a: number, b: number) {
      return a + b;
    },
    subtraction(a: number, b: number) {
      return a - b;
    },
    multiplication(a: number, b: number) {
      return a * b;
    },
  },
});

test file

import addition from "./App.vue"
describe("HelloWorld.vue", () => {
  it("testing vue method", () => {
    expect(addition(1,2).toBe(3));
  });
});

//error on line 4 states "Value of type 'DefineComponent<{}, {}, any, ComputedOptions, MethodOptions, ComponentOptionsMixin, 
// ComponentOptionsMixin, ... 4 more ..., {}>' is not callable. Did you mean to include 'new'?"

Upvotes: 1

Views: 2154

Answers (1)

tony19
tony19

Reputation: 138616

The App.vue file is compiled into a component definition, which is used to instantiate the App component with Vue Test Util's mount or shallowMount, which results in a test wrapper. The wrapper has a vm property that provides direct access to the component's methods and props.

So your test should look similar to this:

import { shallowMount } from "@vue/test-utils";
import App from "./App.vue";

describe("App.vue", () => {
  it("testing vue method", () => {
    const wrapper = shallowMount(App);
    expect(wrapper.vm.addition(1,2)).toBe(3);
  });
});

Upvotes: 2

Related Questions