React Testing Library

3ステップで試す

1. 1

   固定版のDOM試験環境を作る

   この検証用JSDOM 27.0.0にはNode.js 20以上とnpmが必要です。React Testing Library 16.3.3自体の要件はNode.js 18以上です。一時ディレクトリに固定版を導入します。

   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.0コピー
2. 2

   利用者操作を試すコードを書く

   Count 0ボタンを役割と表示名で探して押し、再び役割からCount 1を探すコードを書きます。

   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.mjsコピー
3. 3

   表示更新を検証する

   Node.js上のJSDOMで実行し、利用者に見えるボタン文言がCount 1へ更新されることを確認します。

   test "$(node demo.mjs)" = "Count 1"コピー

Built with

• JavaScript
• React

カテゴリとタグ

GitHubデータ

このOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。

あわせて探訪

• Next.js143,179 Stars

  共通タグ 2件 · 同じ言語

  Reactのrouting・rendering・server機能をまとめてフルスタックWebアプリを構築する

  JavaScript
• Emotion18,019 Stars

  共通タグ 2件 · 同じ言語

  object/string style・composition・themeをReactへ組み込む高性能CSS-in-JS library

  JavaScript
• PLANKA12,603 Stars

  共通タグ 2件 · 同じ言語

  board・list・card・comment・attachmentをrealtimeで共有するself-host Kanban/project tracker

  JavaScript
• react-i18next10,051 Stars

  共通タグ 2件 · 同じ言語

  i18nextのtranslation resourceをuseTranslation・Trans等でReact componentへ接続する公式binding

  JavaScript
• Carbon Design System9,521 Stars

  共通タグ 2件 · 同じ言語

  React components・Sass styles・design tokens・iconsを共通化し、IBM Design Languageに沿ったproduct UIを構築する

  JavaScript
• Onsen UI8,854 Stars

  共通タグ 2件 · 同じ言語

  Web Componentsを中心にiOS/Android風UIを同じHTML・JavaScriptから構築する

  JavaScript