How to use with Vue context ?

[smarlhens]

Hi there 👋🏻

I hope you are well. Thanks for your job on this library.

I am using this library along testing-library/vue and vitest to run some tests but since 1.5.0 I'm getting a lot of warnings (Unhead is missing Vue context, falling back to shared context. This may have unexpected results.) as described in the release note.
Edit: not only on test but also at runtime I am getting a lot of warnings.

How I use it currently alongside testing-library/vue:

head.ts

import { createHead } from '@unhead/vue';

export const head = createHead();

main.ts

import { head }  from './composables/head';

app.use(head);

any-component.vue

<script setup lang="ts">
  import { useHead } from '@unhead/vue';

  useHead({
    meta: [{ name: 'description', content: 'This is the best description ever' }],
  });
</script>

any-component.test.ts

import type { RenderOptions, RenderResult } from '@testing-library/vue';
import { render } from '@testing-library/vue';
import Component from 'path/to/components/any-component.vue';
import { head }  from 'path/to/composables/head';

describe('any-component.vue', () => {
  let mountOptions: RenderOptions;

  beforeEach(() => {
    mountOptions = {
      global: {
        plugins: [head],
      },
    };
  });

  it('my super test', () => {
    render(Component, mountOptions);

   // [...]
  });
});

Do you have an idea of how to properly inject head and remove these warnings ?
How to provide context to head ?

Thanks for your help 🙏🏻

Wish you a great day ☀️

[smarlhens]

Hi there 👋🏻

using 1.5.2 setHeadInjectionHandler seems to be fixing the issue:

head.ts

import { createHead } from '@unhead/vue';

export const head = createHead();

main.ts

import { head }  from './composables/head';

- app.use(head);
+ setHeadInjectionHandler(() => head)

any-component.vue

<script setup lang="ts">
  import { useHead } from '@unhead/vue';

  useHead({
    meta: [{ name: 'description', content: 'This is the best description ever' }],
  });
</script>

any-component.test.ts

import type { RenderOptions, RenderResult } from '@testing-library/vue';
import { render } from '@testing-library/vue';
import Component from 'path/to/components/any-component.vue';
import { head }  from 'path/to/composables/head';

describe('any-component.vue', () => {
  let mountOptions: RenderOptions;

  beforeEach(() => {
-    mountOptions = {
-      global: {
-        plugins: [head],
-      },
-    };
+    setHeadInjectionHandler(() => head)
+    mountOptions = {};
  });

  it('my super test', () => {
    render(Component, mountOptions);

   // [...]
  });
});

[harlan-zw]

Hey @smarlhens. Firstly, thank you for the nice words and detailed discussion :)

It looks like you spotted my latest release, so well done on fixing it yourself without any docs! Sorry for the delay in getting back to you, wanted to make sure there was a good solution first.

Wish you a great day as well 🌞