Svelte 5: rendering a component with a global transition causes an error

[ivenuss]

Problem

During migration from Svelte 4 to Svelte 5 I am getting error when I try to render component with global transition.

If I remove the global transition from <p in:slide|global> to <p in:slide>, it no longer throws any error.

Reproduction

Test

// MyComponent.test.ts
import { cleanup, render } from '@testing-library/svelte';
import { afterEach, describe, expect, it } from 'vitest';
import TestMyComponent from './MyComponent.test.svelte';

afterEach(() => {
  cleanup();
});

describe('FormErrorMessage', async () => {
  it('renders', async () => {
    const result = render(TestMyComponent);
    expect(() => result.getByText('message text')).not.toThrow();
  });
});

Components

<!-- TestMyComponent.svelte -->
<script lang="ts">
  import MyComponent from './MyComponent.svelte';
</script>

<MyComponent>message text</MyComponent>

<!-- MyComponent.svelte -->
<p in:slide|global>
  <slot />
</p>

Error log

TypeError: element.animate is not a function
   in MyComponent.svelte
   in MyComponent.test.svelte

 ❯ animate ../../node_modules/.pnpm/[email protected]/node_modules/svelte/src/internal/client/dom/elements/transitions.js:377:26
    375|   // for bidirectional transitions, we start from the current position,
    376|   // rather than doing a full intro/outro
    377|   var t1 = counterpart?.t() ?? 1 - t2;
       |                          ^
    378|   counterpart?.abort();

Package versions

"svelte": "^5.5.3",
"vitest": "^2.1.8",
"@testing-library/svelte": "^5.2.6",

[mcous]

Svelte transitions now require the web animations API, which is not available in jsdom nor happy-dom, due to their lack of GUI. Since this is internal to Svelte, there's nothing (reasonable) for us to do in svelte-testing-library to resolve this.

If you would like to run component-level tests of transitions, you either need to:

• Use a real browser via something like Playwright or Vitest's browser mode
• Try to fake out Element.prototype.animate with mock functions (not recommended)

Alternatively, my preferred approach is to move my interesting logic to components and modules that don't involve transitions, test those components, and then pull those into components that only care about the transitions. From there, I don't bother writing additional component tests, because I can trust that Svelte tests its own transition logic

For more context, see various posts in #284:

• Svelte 5 feedback and support #284 (comment)
• Svelte 5 feedback and support #284 (comment)
• Svelte 5 feedback and support #284 (comment)
• Svelte 5 feedback and support #284 (comment)