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)

[mrguiman]

An additional workaround could be to simply mock svelte/transition inside a vitest-setup file for instance.

vi.mock("svelte/transition")

[mcous]

Component tests tend to be fairly highly integrated - your test runs your own code, the Svelte runtime, the browser/fake DOM runtime, etc. all together. For that reason, I strongly recommend against mocking out "third-party" things like the svelte/transition module. Mocks floating around a highly integrated test, imitating logic you don't control, connected to other "third-party" code in ways you can't easily understand, cause long term pain, in my experience.

Mocks are best reserved for situations where you completely isolate your code under test with those mocks, which is not possible with component tests