example.spec.js

import { mount } from "@vue/test-utils";

const parentComponent = {
  provide() {
    return {
      val: 'from parent'
    };
  },
  template: `
    <div>
      <slot></slot>
    </div>
  `
};

const child = {
  inject: ["val"],
  template: `
    <div>{{ val }}</div>
  `
};

describe("Bug with providing data", () => {
  it("can inject values into a child", () => {
    const wrapper = mount(child, {
      provide: {
        val: "from mount options"
      }
    });
    expect(wrapper.text()).toMatch("from mount options");
  });

  it("can inject values from a parent", () => {
    const template = "<parentComponent><child></child></parentComponent>";
    const components = { parentComponent, child };
    const wrapper = mount({ template, components });
    expect(wrapper.text()).toMatch("from parent");
  });

  it("fails to inject using parentComponent", () => {
    const wrapper = mount(child, { parentComponent });
    expect(wrapper.text()).toMatch("from parent");
  });
});