transition | global

[jjagielka]

Describe the bug

When using the transition with the global modifier testing of the component fails. The same tests passes OK when global is not used.

Reproduction

Assuming you have:

<script>
    // Component.svelte
    import { fade } from "svelte/transition";
</script>

<div transition:fade|global>Hello</div>

When running a test:

import { expect, test } from 'vitest';
import Component from './Component.svelte';

test('Component', async () => {
	const comp = mount(Component, { target: document.body });
        flushSync();
	expect(document.body.innerHTML).toBe('<div>Hello</div>');
	unmount(comp);
})

Got an error:

 ❯ src/demo.spec.js (1 test | 1 failed) 72ms
   × Component 69ms
     → element.animate is not a function

	in <unknown>
	in Component.svelte

However if global is removed from the transition <div transition:fade>Hello</div> the test passes smoothly.

Logs

System Info

System:
    OS: Linux 6.15 Arch Linux
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-11390H @ 3.40GHz
    Memory: 25.80 GB / 31.08 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 24.2.0 - /usr/bin/node
    Yarn: 1.22.22 - /usr/bin/yarn
    npm: 11.4.2 - /usr/bin/npm
    pnpm: 10.12.4 - /usr/bin/pnpm
  Browsers:
    Chromium: 138.0.7204.49
  npmPackages:
    svelte: ^5.0.0 => 5.34.8

Severity

annoyance

[paoloricciuti]

I can't seem to reproduce...i did got a non passing test but it was just because of extra \n and i did get an error in SSR but for something unrelated. Can you provide an actual reproduction?

[jjagielka]

Here you are: https://codesandbox.io/p/devbox/gobal-demo-nk5ccl

The minimal Svelte app, with Component.svelte (without global) and ComponentGlobal.svelte (with global modifier).

component.test.js has the identical test for both.

Note: include flushSync after mounting the component in your test

[paoloricciuti]

Oh checked...the issue it's not with svelte then...the same error happens with non global transitions if you actually try to transition them eg.

<script>
	import { fade } from 'svelte/transition';
	let checked = true;
</script>

<input type="checkbox" bind:checked />

{#if checked}
	<div transition:fade>Hello</div>
{/if}

test('Component', () => {
	// Instantiate the component using Svelte's `mount` API
	const component = mount(Component, {
		target: document.body, // `document` exists because of jsdom
		props: {},
	});
	flushSync();

	document.body.querySelector('input').click();
	flushSync();

	expect(document.body.innerHTML).toBe(
		'<input type="checkbox"> <div>Hello</div><!---->'
	);

	// Remove the component from the DOM
	unmount(component);
});

this is a bug in JSDom jsdom/jsdom#3429

Thanks for reporting! 🧡