Component testing with Testing Library in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output after clicking the button?

Given this Svelte component test using Testing Library, what will be the text content of the button after the click event?

Svelte

import { render, fireEvent } from '@testing-library/svelte';
import ToggleButton from './ToggleButton.svelte';

test('button toggles text on click', async () => {
  const { getByText } = render(ToggleButton);
  const button = getByText('Off');
  await fireEvent.click(button);
  expect(button.textContent).toBe('On');
});

A "On"

B "Off"

C "Clicked"

D "Error: button not found"

💡 Hint

Think about what the component does when the button is clicked.

The button initially shows "Off". After clicking, the component toggles the text to "On".

📝 Syntax

intermediate

Which option correctly imports Testing Library for Svelte?

Choose the correct import statement to use Testing Library in a Svelte test file.

A import { render, fireEvent } from 'testing-library-svelte';

B import { render, fireEvent } from 'svelte-testing-library';

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

D import { render, fireEvent } from '@testing-library/react';

💡 Hint

Check the official package name for Testing Library with Svelte.

The official Testing Library package for Svelte is '@testing-library/svelte'. Other options are incorrect or for different frameworks.

🔧 Debug

advanced

Why does this test fail with 'Unable to find an element with the text: Submit'?

Examine the test code below. Why does the test fail with the error 'Unable to find an element with the text: Submit'?

Svelte

import { render } from '@testing-library/svelte';
import FormButton from './FormButton.svelte';

test('renders submit button', () => {
  const { getByText } = render(FormButton, { props: { label: 'Submit' } });
  getByText('Submit');
});

A The getByText method is misspelled and causes an error.

B The FormButton component does not use the 'label' prop to set button text.

C The test forgot to await an async render call.

D The component file path is incorrect, so it renders nothing.

💡 Hint

Check how the component uses props to render text.

If the component does not use the 'label' prop to set the button text, the text 'Submit' won't appear, causing getByText to fail.

❓ state_output

advanced

What is the final count displayed after these interactions?

Given this Svelte counter component test, what is the final number displayed after the clicks?

Svelte

import { render, fireEvent } from '@testing-library/svelte';
import Counter from './Counter.svelte';

test('increments and decrements counter', async () => {
  const { getByText } = render(Counter);
  const incrementBtn = getByText('+');
  const decrementBtn = getByText('-');
  const countDisplay = getByText('0');

  await fireEvent.click(incrementBtn);
  await fireEvent.click(incrementBtn);
  await fireEvent.click(decrementBtn);

  expect(countDisplay.textContent).toBe('1');
});

A 1

B 0

C 2

D -1

💡 Hint

Count how many times the increment and decrement buttons are clicked.

Two increments add 2, one decrement subtracts 1, so final count is 1.

🧠 Conceptual

expert

Which Testing Library query is best for selecting a button by its accessible name?

In Testing Library for Svelte, which query method best selects a button element by its accessible name for accessibility compliance?

A getByLabelText('Submit')

B getByText('Submit')

C getByTestId('submit-button')

D getByRole('button', { name: 'Submit' })

💡 Hint

Consider ARIA roles and accessible names for best practice.

Using getByRole with the 'button' role and accessible name ensures the element is a button and matches the visible accessible accessible label, improving accessibility testing.