How do I test Svelte components effectively?

How do I test Svelte components effectively?

To test Svelte components, you can use testing libraries like Jest or Testing Library. They provide utilities to render components and assert their behavior.

Can you show me an example of a simple test?

Sure! Here's a basic example using Testing Library:

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

test('renders the component', () => {
  render(MyComponent);
  const element = screen.getByText(/hello world/i);
  expect(element).toBeInTheDocument();
});

What about testing events in Svelte?

You can simulate events using the fireEvent utility from Testing Library. For example:

import { fireEvent } from '@testing-library/svelte';

test('button click updates text', async () => {
  const { getByText } = render(MyComponent);
  const button = getByText('Click me');
  await fireEvent.click(button);
  expect(getByText('Text after click')).toBeInTheDocument();
});

Are there any best practices for testing Svelte components?

Yes! Some best practices include testing the component's public API, keeping tests isolated, and using descriptive test names.