React Testing Library

Try it in 3 steps

1. 1

   Create a pinned DOM test environment

   This JSDOM 27.0.0 sample requires Node.js 20 or later and npm; React Testing Library 16.3.3 itself supports Node.js 18 or later. Install the pinned packages in a temporary project.

   demo=$(mktemp -d "${TMPDIR:-/tmp}/react-testing-library.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-exact @testing-library/react@16.3.3 @testing-library/dom@10.4.1 react@19.2.0 react-dom@19.2.0 jsdom@27.0.0Copy
2. 2

   Write a user interaction check

   Find the Count 0 button by role and accessible name, click it, and query Count 1 by role again.

   printf '%s\n' 'import {JSDOM} from '\''jsdom'\''' 'const dom=new JSDOM('\''<!doctype html><html><body></body></html>'\'')' 'globalThis.window=dom.window;globalThis.document=dom.window.document' 'Object.defineProperty(globalThis,'\''navigator'\'',{value:dom.window.navigator,configurable:true})' 'globalThis.HTMLElement=dom.window.HTMLElement;globalThis.Node=dom.window.Node' 'const React=await import('\''react'\'')' 'const {render,screen,fireEvent,cleanup}=await import('\''@testing-library/react'\'')' 'function Counter(){const [count,setCount]=React.useState(0);return React.createElement('\''button'\'',{onClick:()=>setCount(n=>n+1)},`Count ${count}`)}' 'render(React.createElement(Counter))' 'fireEvent.click(screen.getByRole('\''button'\'',{name:'\''Count 0'\''}))' 'console.log(screen.getByRole('\''button'\'',{name:'\''Count 1'\''}).textContent)' 'cleanup()' > demo.mjsCopy
3. 3

   Verify the visible update

   Run under JSDOM in Node.js and require the user-visible button text to update to Count 1.

   test "$(node demo.mjs)" = "Count 1"Copy

Built with

• JavaScript
• React

Categories and tags

GitHub data

Share a guide or use case for this OSS in Markdown. Articles are published after administrator approval.

Explore next

• Next.js143,179 Stars

  2 shared tag(s) · Same language

  combine React routing, rendering, and server capabilities for full-stack web applications

  JavaScript
• Emotion18,019 Stars

  2 shared tag(s) · Same language

  high-performance CSS-in-JS for React with object/string styles, composition, theming, and runtime caching

  JavaScript
• PLANKA12,603 Stars

  2 shared tag(s) · Same language

  Share boards, lists, cards, comments, and attachments in a realtime self-hosted Kanban/project tracker

  JavaScript
• react-i18next10,051 Stars

  2 shared tag(s) · Same language

  official React binding that connects i18next resources to components through useTranslation, Trans, providers, and SSR helpers

  JavaScript
• Carbon Design System9,521 Stars

  2 shared tag(s) · Same language

  share React components, Sass styles, design tokens, and icons to build product interfaces aligned with IBM Design Language

  JavaScript
• Onsen UI8,854 Stars

  2 shared tag(s) · Same language

  build iOS- and Android-style interfaces from shared HTML and JavaScript with Web Components

  JavaScript