CODEWITHSUNDEEP
javascriptvue.jsunit-testing
JithinAji
JithinAji

Reputation: 489

Vue Unit Test: provide injection variable not found

I have a vue file having inject which also has a unit test file. When I run the test: utils I'm getting the following warning. What is the proper way of using provide while mounting the component in test file? I tried to do it the same way as shown in vue test docuentation but still something is not right.

export default {
  name: "Navbar",
  inject: ["emitter"],
  props: {
  ishome: {
      default: true,
      type: Boolean,
    },
  },
  data() {
    return {
      isFeedback: false,
    };
  },

  mounted() {
    this.emitter.on("openFeedback", () => {
      this.isFeedback = true;
    });
    this.emitter.on("closeFeedback", () => {
      this.isFeedback = false;
    });
  },
}

import { mount } from "@vue/test-utils";
import Navbar from "../components/Navbar.vue";
import mitt from "mitt";

describe("Mounted App isHome true", () => {
  try {
    const emit = mitt();
    const wrapper = mount(Navbar, {
      provide: {
        emitter() {
          return emit;
        },
      },
      props: {
        isHome: true,
      },
    });
  } catch (error) {
    expect(error).toBe("");
  }

console.warn node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6533
      [Vue warn]: injection "emitter" not found. 
        at <Navbar isHome=true ref="VTU_COMPONENT" > 
        at <VTUROOT>
    console.warn node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6533
      [Vue warn]: Unhandled error during execution of mounted hook 
        at <Navbar isHome=true ref="VTU_COMPONENT" > 
        at <VTUROOT>
    console.warn node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6533
      [Vue warn]: injection "emitter" not found. 
        at <Navbar isHome=false ref="VTU_COMPONENT" > 
        at <VTUROOT>

Upvotes: 4

Views: 3586

Answers (1)

sjonnie
sjonnie

Reputation: 126

With Vue 3 options API it seems that you need to specify the provide option globally. Though, i cannot find that in documentation Thereafter it seems that you need to provide the service as an attribute, rather than a method. Cannot find that either in any on-line documentation...

const wrapper = mount(Navbar, {
      global: {
        provide: {
          "emitter": emit;
        },
        props: {
          isHome: true,
        },
      });

Upvotes: 11

Related Questions