typescript 63 lines · 2 tabs

React Testing Library for component tests

Maya Patel Jan 2026

2 tabs

import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { PostCard } from '../PostCard'
import { Post } from '@/types'

const mockPost: Post = {
  id: '1',
  title: 'Test Post',
  body: 'This is a test post',
  excerpt: 'This is a test',
  status: 'published',
  published_at: '2024-01-15T10:00:00Z',
  created_at: '2024-01-15T10:00:00Z',
  updated_at: '2024-01-15T10:00:00Z',
  author: {
    id: '1',
    name: 'John Doe',
    email: 'john@example.com',
    avatar_url: null,
  },
  tags: ['react', 'testing'],
  comments_count: 5,
  likes_count: 10,
}

describe('PostCard', () => {
  it('renders post information', () => {
    render(<PostCard post={mockPost} />)

    expect(screen.getByRole('heading', { name: 'Test Post' })).toBeInTheDocument()
    expect(screen.getByText('This is a test')).toBeInTheDocument()
    expect(screen.getByText('John Doe')).toBeInTheDocument()
    expect(screen.getByText('10')).toBeInTheDocument() // likes count
  })

  it('navigates to post detail when title is clicked', async () => {
    const user = userEvent.setup()
    render(<PostCard post={mockPost} />)

    const titleLink = screen.getByRole('link', { name: 'Test Post' })
    await user.click(titleLink)

    // Assert navigation occurred (with router mock)
  })

  it('shows tags', () => {
    render(<PostCard post={mockPost} />)

    expect(screen.getByText('react')).toBeInTheDocument()
    expect(screen.getByText('testing')).toBeInTheDocument()
  })
})

import '@testing-library/jest-dom'
import { server } from './mocks/server'

// Establish API mocking before all tests
beforeAll(() => server.listen())

// Reset handlers after each test
afterEach(() => server.resetHandlers())

// Clean up after tests
afterAll(() => server.close())

2 files · typescript Explain with highlit

Testing Library encourages testing components from the user's perspective rather than implementation details. I query elements by accessible labels, text content, or roles—not by CSS classes or test IDs. User interactions use userEvent to simulate realistic behavior like typing and clicking. Async queries like findBy wait for elements to appear, perfect for testing loading states. I mock API calls with MSW (Mock Service Worker) to test component behavior with realistic data. Tests focus on what users see and do, making them resilient to refactors. This philosophy catches real bugs while avoiding brittle tests that break on internal changes.

Related snips

ruby

class CommentsController < ApplicationController
  before_action :set_post

  def create
    @comment = @post.comments.build(comment_params)

System test: asserting Turbo Stream responses

rails hotwire turbo

by codesnips 4 tabs

typescript

export interface RetryOptions {
  retries: number;
  baseMs: number;
  maxMs: number;
  signal?: AbortSignal;
  onRetry?: (attempt: number, delay: number, err: unknown) => void;

Exponential backoff with jitter for retries

typescript reliability retry

by codesnips 2 tabs

typescript

import axios, { AxiosError } from 'axios'
import { v4 as uuidv4 } from 'uuid'

const api = axios.create({
  baseURL: import.meta.env.VITE_API_URL || 'http://localhost:3000/api/v1',
  timeout: 15000,

Axios API client with interceptors

react axios api

by Maya Patel 1 tab

typescript

import { create } from 'zustand'
import { persist } from 'zustand/middleware'

interface FilterState {
  search: string
  category: string | null

Zustand for lightweight state management

react zustand state-management

by Maya Patel 2 tabs

rust

use my_crate::add;

#[test]
fn test_public_api() {
    assert_eq!(add(3, 4), 7);
}

Integration tests in tests/ directory

rust testing integration

by Marcus Chen 1 tab

typescript

import React from "react";

type FallbackProps = {
  error: Error;
  reset: () => void;
};

React Error Boundary + error reporting hook

react frontend error-boundary

by codesnips 3 tabs

Share this code

Here's the card — post it anywhere.

React Testing Library for component tests — share card

Link copied