Vue-test-utils: Composition API provide/inject with symbols are not working

[Babbafett]

I am not able to provide/inject my composition function in my component during a test.

I have the following provide function to provide my function to my main component:

export interface AuthContext {
  redirectToCachedRoute(): Promise<void>;
  login(): Promise<void>;
  logout(): Promise<void>;
  getAccessToken(): Promise<CognitoAccessToken>;
  getUserInfo(): Promise<CognitoUserInfo | any>;
  getPermissions(): Promise<string[]>;
  cacheRoute(route: Route | string): Promise<void>;
}

const AuthContextKey: InjectionKey<AuthContext> = Symbol('auth');
export function provideAuth() {
.......
  const auth: AuthContext = {
    redirectToCachedRoute,
    login,
    logout,
    getAccessToken,
    getUserInfo,
    getPermissions,
    cacheRoute,
  };

  provide<AuthContext>(AuthContextKey, auth);

  return auth;
}

I have the following function to inject my function to my child components:

export function useAuth() {
  const context = inject<AuthContext>(AuthContextKey);

  if (context == null) {
    throw new Error('provideAuth call missing in main.ts');
  }

  return context;
}

Both functions are in the same file and have access to my injection key.
The provideAuth function will be called within the setup function of my main.ts:

new Vue({
  setup() {
    const auth = provideAuth();
    return {};
  },
  render: (h) => h(App),
}).$mount('#app');

Subject of the issue

Composition API: Provide/Inject with InjectionKeys are not working

Steps to reproduce

1. Create a new composition function with a provide and a use function following the recommended instructions of the RFC api reference --> https://composition-api.vuejs.org/api.html#dependency-injection

2. Use the use function at your component and try to mount the component.

Expected behaviour

Child component can inject the object from the use function.

Actual behaviour

inject command failed because it can't find the symbol injection key at the child component.
Exception "throw new Error('provideAuth call missing in main.ts');" of my inject function is raised.

Possible Solution

I tried to provide my function with the setup mounting options and also tried to provide it via the provide options, but both are not working:

describe('general-content-page.vue', () => {
  const localVue = createLocalVue();
  localVue.use(CompositionApi);
  const key: InjectionKey<AuthContext> = Symbol('auth');
  const mock: AuthContex t= {
     redirectToCachedRoute: jest.fn(),
     login: jest.fn(),
     logout: jest.fn(),
     getAccessToken: jest.fn(),
     getUserInfo: jest.fn(),
     getPermissions: jest.fn(),
     cacheRoute: jest.fn(),
  };

  const provide = {
    [key as symbol]: provideAuth(),
  };
  const setup = (context: any) => {
    provideAuth();
    return {};
  };
  localVue.config = {}
  it('1. Try with setup options', () => {
    const wrapper = shallowMount(GeneralContentPage, { localVue, setup});
    expect(wrapper).toBeTruthy();
  });
  it('2. Try with provide options', () => {
    const wrapper = shallowMount(GeneralContentPage, { localVue, provide});
    expect(wrapper).toBeTruthy();
  });
});

I think it's related about the uniqueness of the symbol. Even when I am tried to export the symbol from my composition and then using that key for the injection within my provide or setup options it is failing.

[lmiller1990]

I tried to reproduce this using the same technique (unique key) but no luck. See my passing test here: https://github.com/vuejs/vue-test-utils/pull/1598

Are you doing something different to this? I don't think so 🤔

Can you please provide a repository I can pull down and run?

[Babbafett]

I think it might be related that I am using the InjectionKey interface for providing the symbol. That is the only difference I can see compared to your commit, but even if I change it from InjectionKey interface to a normal symbol it is still failing.

I created the following repo for reproducing the error: repo

[lmiller1990]

I will take a look at your repo today. InjectionKey is just at type and won't make any different in the behavior.

[Babbafett]

Thanks and yeah i know, but due to the type I had to cast it to a symbol to be used as a computed property otherwise I am getting a type error that was my idea behind my assumption:
const provide = { [key as symbol]: provideAuth(), };

[lmiller1990]

Seems like some deps are missing - I cannot run your example 🤔

Cannot find module 'babel-plugin-transform-runtime' from '/Users/lachlan/code/dump/Test-Composition-API-ProvideInject'

[pikax]

That doesn't work because the symbols are different

Each time you use Symbol it will generate a different one.

// test.spec.ts
const key: InjectionKey<AuthContext> = Symbol('auth'); // this symbol is different than the one used in  `services/auth.service`

You can export the symbol from services/auth.service if you want to test, or provide a method setAuth.

[Babbafett]

Seems like some deps are missing - I cannot run your example 🤔

Cannot find module 'babel-plugin-transform-runtime' from '/Users/lachlan/code/dump/Test-Composition-API-ProvideInject'

Hmm strange I did a clean clone again, run npm install and then run npm run test:unit and it is working for me.

That doesn't work because the symbols are different

Each time you use Symbol it will generate a different one.

// test.spec.ts
const key: InjectionKey<AuthContext> = Symbol('auth'); // this symbol is different than the one used in  `services/auth.service`

You can export the symbol from services/auth.service if you want to test, or provide a method setAuth.
In my first post I talked about the same that I assume that this is about the uniqueness of the symbol and also tried it, but i was not working.
But anyway i tried it again and now it is working :-) thanks,

I updated my test repo to provide a running example in case of that someone else has the same issue.