Component testing with Testing Library in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the main purpose of Testing Library in component testing?

Testing Library helps test components by simulating how users interact with them, focusing on behavior rather than implementation details.

beginner

How do you render a Svelte component in Testing Library?

Use the render function from @testing-library/svelte and pass the component to it, like render(MyComponent).

intermediate

Which Testing Library query would you use to find a button by its visible text?

Use getByRole('button', { name: 'button text' }) to find a button by its visible label, ensuring accessibility best practices.

intermediate

Why is it better to test user interactions instead of component internals?

Testing user interactions ensures your tests check real behavior, making them more reliable and less fragile to internal code changes.

beginner

How can you simulate a click event on a button in Testing Library?

Use the fireEvent.click(element) function to simulate a user clicking the button.

Which function do you use to render a Svelte component in Testing Library?

A render()

B mount()

C create()

D compile()

The render() function from @testing-library/svelte is used to render components for testing.

What does Testing Library encourage you to test?

A Component internal variables

B Private methods

C CSS styles

D User interactions and visible output

Testing Library focuses on testing what the user sees and does, not internal implementation.

How do you find an element by its accessible role and name?

A getByText()

B getByRole('role', { name: 'label' })

C querySelector()

D getElementById()

Using getByRole with a name option finds elements by role and accessible name, improving test reliability.

Which method simulates a click event in Testing Library?

A fireEvent.click()

B simulateClick()

C triggerClick()

D clickEvent()

fireEvent.click() is the correct way to simulate clicks in Testing Library.

Why should tests avoid checking component internals?

A Internals are always private

B Internals never change

C It makes tests fragile and less user-focused

D Testing internals is faster

Testing internals can break tests easily when code changes; focusing on user behavior keeps tests stable.

Explain how to write a basic test for a Svelte component using Testing Library.

Think about the steps from rendering to checking what the user sees.

Describe why Testing Library focuses on user interactions rather than component internals.

Consider what makes tests reliable and meaningful.