Component tests use @testing-library/svelte. Mount components using render method. Test component behavior and DOM updates. Example: import { render } from '@testing-library/svelte'; const { getByText } = render(Component);
Svelte Inspector is a development tool enabled with 'ctrl + shift + i'. Shows component hierarchy, props, state. Helps debug component structure and data flow. Available in development mode.
Vitest is the recommended testing framework for Svelte applications. It's fast, provides good integration with SvelteKit, and supports component testing. Jest can also be used but requires additional configuration.
Async tests use async/await syntax. Test async operations using act function. Handle promises and timeouts. Example: await fireEvent.click(button); await findByText('result');
Animation testing verifies transition behavior. Test animation states. Handle animation timing. Implement animation checks. Manage animation events.
Error handling testing verifies error states. Test error boundaries. Handle error recovery. Implement error scenarios. Manage error logging.
Advanced patterns include test factories, test builders. Handle complex scenarios. Support pattern composition. Implement testing strategies.
Test monitoring tracks test execution. Handle test metrics. Support test analytics. Implement monitoring tools. Manage monitoring data.
Test documentation describes test cases. Generate documentation automatically. Support example tests. Manage documentation updates. Handle versioning.
Environment management handles test environments. Set up configurations. Support multiple environments. Implement environment isolation. Manage dependencies.
Testing matchers verify component state/behavior. Include toBeInTheDocument, toHaveTextContent, toBeVisible. Provided by @testing-library/jest-dom. Support custom matchers.
Props testing verifies component behavior with different props. Test prop types and values. Handle prop updates. Verify component rendering.
Integration testing verifies component interaction. Test multiple components. Handle data flow. Implement test scenarios. Manage test environment.
Test fixtures provide test data. Handle data setup. Support test isolation. Implement fixture management. Manage fixture cleanup.
Test hooks handle test lifecycle. Support setup/teardown. Implement test utilities. Manage test state. Handle test dependencies.
Test coverage tracks code coverage. Generate coverage reports. Set coverage targets. Implement coverage checks. Manage coverage gaps.
Test organization structures test files. Group related tests. Support test discovery. Implement naming conventions. Manage test hierarchy.
Test automation handles continuous testing. Set up CI/CD pipelines. Support automated runs. Implement test reporting. Manage test environments.
Load testing verifies application performance. Test under heavy load. Handle stress scenarios. Implement load simulation. Manage performance data.
Store state can be debugged using $store syntax. Subscribe to store changes. Log state updates. Use Svelte devtools. Monitor store mutations.
Testing hierarchy includes unit tests, integration tests, end-to-end tests. Focus on component isolation. Test component interaction. Verify application flow.
Event handlers tested using fireEvent. Simulate user interactions. Verify event outcomes. Example: fireEvent.click(button); expect(result).toBe(expected);
