prefer testing libraries

When testing components, use established testing libraries like @testing-library/svelte instead of low-level DOM manipulation approaches. Low-level testing with direct mount/unmount and querySelector calls is brittle and requires frequent updates when component structure changes. Testing libraries provide user-focused APIs that are more robust to...

copy reviewer prompt

Prompt

Reviewer Prompt
Deploy Agent

When testing components, use established testing libraries like @testing-library/svelte instead of low-level DOM manipulation approaches. Low-level testing with direct mount/unmount and querySelector calls is brittle and requires frequent updates when component structure changes. Testing libraries provide user-focused APIs that are more robust to implementation changes.

// Avoid: Low-level DOM testing
test('Component', () => {
  const component = mount(Component, {
    target: document.body,
    props: { initial: 0 }
  });
  
  expect(document.body.innerHTML).toBe('<button>0</button>');
  document.body.querySelector('button').click();
  flushSync();
  expect(document.body.innerHTML).toBe('<button>1</button>');
  
  unmount(component);
});

// Prefer: Testing library approach
test('Component', async () => {
  const user = userEvent.setup();
  render(Component, { props: { initial: 0 } });
  
  const button = screen.getByRole('button');
  expect(button).toHaveTextContent('0');
  
  await user.click(button);
  expect(button).toHaveTextContent('1');
});

Testing libraries focus on how users interact with your components rather than implementation details, making tests more maintainable and less likely to break when refactoring component structure.

Source discussions