Closed
Description
Assuming you have:
<script>
// Component.svelte
import { fade } from "svelte/transition";
</script>
<div transition:fade|global>Hello</div>When running a test:
import { render, screen } from '@testing-library/svelte';
import { expect, test } from 'vitest';
import Component from './Component.svelte';
test('Component', async () => {
render(Component);
const div = screen.getByText('Hello');
expect(div).toHaveTextContent('Hello');
});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 tests passes smoothly.
The error seems to be during mount in the render function, but the clean mount does not cause the error, as the below test passes OK both with and without global modifier.
test('Component', async () => {
const comp = mount(Component, { target: document.body });
expect(document.body.innerHTML).toBe('<div>Hello</div>');
unmount(comp);
})Metadata
Metadata
Assignees
Labels
No labels