Testing Library | Sheetly Cheat Sheet

Last Updated: November 21, 2025

Testing Library

User-centric testing utilities

Core Principles

Item Description
User-Centric Test like users interact
No Implementation Don't test internals
Accessible Encourage accessibility
Framework Agnostic Works with any framework
Queries Find elements semantically
Events Simulate user interactions

React Example

import { render, screen, fireEvent } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import Counter from './Counter'

test('increments counter', async () => {
  render(<Counter />)
  
  // Query by role
  const button = screen.getByRole('button', { name: /increment/i })
  const count = screen.getByText(/count: 0/i)
  
  // User interaction
  await userEvent.click(button)
  
  // Assertion
  expect(screen.getByText(/count: 1/i)).toBeInTheDocument()
})

Query Priority

Item Description
getByRole Most accessible (use first)
getByLabelText Form inputs
getByPlaceholderText When no label
getByText Non-interactive content
getByDisplayValue Current form value
getByTestId Last resort

Best Practices

  • Prefer getByRole over getByTestId
  • Use userEvent over fireEvent
  • Test user behavior, not implementation
  • Use findBy for async elements

💡 Pro Tips

Quick Reference

Testing Library encourages accessible applications

← Back to Web Frameworks | Browse all categories | View all cheat sheets