Testing svelte:head content in unit tests #16793

jhechtf · 2025-09-18T05:41:37Z

jhechtf
Sep 18, 2025

This is perhaps a silly question, but it's something I ran into at work.

We have a couple of components which are using JS libraries to defer the displaying of some content within our written articles and blogs.

There is also a unit test, broken down to it's very basic pieces, you get something that looks like this:

// special.svelte
<script>
 // Other code here
</script>
<svelte:head>
  <script>
    // some required args for the library
    window.SOME_LIBRARY = { disable_autoload: true };
  </script>
  <!-- not the actual library, but to show the point that something has to load here -->
  <script src="https://code.jquery.com/jquery-3.7.1.slim.min.js" defer></script>
</svelte:head>

<!-- other HTML here -->

In practice, this works fine when testing on a browser, but someone well before I got there created a test that looks something like this

import { render } from '@testing-library/svelte';
import { describe, expect, it } from 'vitest';
import Special from './special.svelte';

describe('Special', () => {
  it('Does its special thing', async () => {
    render(Special);
    expect((window as any).SOME_LIBRARY).toBeDefined();
    expect(
      document.head.querySelector(
        'script[src="https://code.jquery.com/jquery-3.7.1.slim.min.js"]',
      ),
    ).toBeInTheDocument();
  });
});

Which fails, and writing the entire DOM to the console shows me

<html>
  <head>


  </head>
  <body>
    <div>
      <div>
        Loading...
      </div>
    </div>
  </body>
</html>

It seems that in svelte 5 (I haven't been able to test on svelte 4) the <svelte:head> contents are not being applied in test environments.

Anyone got any ideas how I can fix this?

anntnzrb · 2025-12-04T16:39:13Z

anntnzrb
Dec 4, 2025

In JSDOM-based tests (vitest + @testing-library/svelte), <svelte:head> content renders to document.head. Access it directly:

import { render } from '@testing-library/svelte';
import MyComponent from './MyComponent.svelte';

test('renders head content', async () => {
  render(MyComponent);
  
  // Wait for async rendering if needed
  await new Promise(r => setTimeout(r, 0));
  
  expect(document.head.querySelector('meta[name="description"]')).toBeTruthy();
});

Ensure environment: 'jsdom' is set in vitest.config.js. If head is empty, verify the component is actually mounting by checking other DOM content first.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Testing svelte:head content in unit tests #16793

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Testing svelte:head content in unit tests #16793

Uh oh!

jhechtf Sep 18, 2025

Replies: 1 comment

Uh oh!

anntnzrb Dec 4, 2025

jhechtf
Sep 18, 2025

anntnzrb
Dec 4, 2025