Reactコンポーネントのテスト

Jestを使用して最初のReactコンポーネントをテストし、`react-testing-library`

Reactコンポーネントのテストを開始する最も簡単な方法は、スナップショットテストを実行することです。これは、コンポーネントを個別にテストできるテスト手法です。

ソフトウェアのテストに精通している場合は、クラスに対して行う単体テストと同じです。つまり、各コンポーネントの機能をテストします。

私はあなたがReactアプリを作成したと思いますcreate-react-app、すでに付属しています冗談インストールされた、必要なテストパッケージ。

簡単なテストから始めましょう。 CodeSandboxは、これを試すのに最適な環境です。 Reactサンドボックスから始めて、App.jsのコンポーネントcomponentsフォルダを追加し、App.test.jsファイル。

import React from 'react'
export default function App() {
return (
<div className=“App”>
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
)
}

私たちの最初のテストはばかげています：

test('First test', () => {
  expect(true).toBeTruthy()
})

CodeSandboxがテストファイルを検出すると、自動的に実行されます。ビューの下部にある[テスト]ボタンをクリックして、テスト結果を表示できます。

テストファイルには、複数のテストを含めることができます。

Reactコンポーネントを実際にテストするために、もう少し便利なことをしてみましょう。現在はAppしかありませんが、実際には何もしていません。まず、以前に作成したカウンターアプリという、より多くの機能を備えた小さなアプリケーションで環境をセットアップしましょう。スキップした場合は、戻って作成方法を読むことができますが、参照しやすいように、ここにもう一度追加します。

アプリとボタンの2つのコンポーネントだけです。を作成しますApp.jsファイル：

import React, { useState } from 'react'
import Button from './Button'
const App = () => {
const [count, setCount] = useState(0)
const incrementCount = increment => {
setCount(count + increment)
}
return (
<div>
<Button increment={1} onClickFunction={incrementCount} />
<Button increment={10} onClickFunction={incrementCount} />
<Button increment={100} onClickFunction={incrementCount} />
<Button increment={1000} onClickFunction={incrementCount} />
<span>{count}</span>
</div>
)
}
export default App

そしてそのButton.jsファイル：

import React from 'react'
const Button = ({ increment, onClickFunction }) => {
const handleClick = () => {
onClickFunction(increment)
}
return <button onClick={handleClick}>+{increment}</button>
}
export default Button

を使用しますreact-testing-library、これは、すべてのコンポーネントの出力を検査し、それらにイベントを適用できるため、非常に役立ちます。あなたはそれについてもっと読むことができますhttps://github.com/kentcdodds/react-testing-libraryまたは見てこのビデオ。

最初にButtonコンポーネントをテストしてみましょう。

インポートから始めますrenderそしてfireEventからreact-testing-library、2人のヘルパー。 1つ目は、JSXをレンダリングします。 2つ目は、コンポーネントでイベントを発行できるようにします。

作成するButton.test.jsと同じフォルダに入れますButton.js。

import React from 'react'
import { render, fireEvent } from 'react-testing-library'
import Button from './Button'

ボタンは、クリックイベントを受け入れるためにアプリで使用され、次に、に渡された関数を呼び出します。onClickFunction小道具。追加しますcount変数とそれをインクリメントする関数を作成します：

let count
const incrementCount = increment => {
count += increment
}

次に、実際のテストに移ります。最初にカウントを0に初期化し、レンダリングします+1 Buttonコンポーネントを渡す1にincrementと私たちのincrementCount機能するonClickFunction。

次に、コンポーネントの最初の子のコンテンツを取得し、出力を確認します+1。

次に、ボタンのクリックに進み、カウントが0から1になったことを確認します。

test('+1 Button works', () => {
  count = 0
  const { container } = render(
    <Button increment={1} onClickFunction={incrementCount} />
  )
  const button = container.firstChild
  expect(button.textContent).toBe('+1')
  expect(count).toBe(0)
  fireEvent.click(button)
  expect(count).toBe(1)
})

同様に、+ 100ボタンをテストしますが、今回は出力を確認します。+100 and the button click increments the count of 100.

test('+100 Button works', () => {
  count = 0
  const { container } = render(
    <Button increment={100} onClickFunction={incrementCount} />
  )
  const button = container.firstChild
  expect(button.textContent).toBe('+100')
  expect(count).toBe(0)
  fireEvent.click(button)
  expect(count).toBe(100)
})

それでは、Appコンポーネントをテストしてみましょう。 4つのボタンと結果がページに表示されます。各ボタンを調べて、ボタンをクリックしたときに結果が増加するかどうかを確認できます。複数回クリックすることもできます。

import React from 'react'
import { render, fireEvent } from 'react-testing-library'
import App from './App'
test(‘App works’, () => {
const { container } = render(<App />)
console.log(container)
const buttons = container.querySelectorAll(‘button’)
expect(buttons[0].textContent).toBe(’+1’)
expect(buttons[1].textContent).toBe(’+10’)
expect(buttons[2].textContent).toBe(’+100’)
expect(buttons[3].textContent).toBe(’+1000’)
const result = container.querySelector(‘span’)
expect(result.textContent).toBe(‘0’)
fireEvent.click(buttons[0])
expect(result.textContent).toBe(‘1’)
fireEvent.click(buttons[1])
expect(result.textContent).toBe(‘11’)
fireEvent.click(buttons[2])
expect(result.textContent).toBe(‘111’)
fireEvent.click(buttons[3])
expect(result.textContent).toBe(‘1111’)
fireEvent.click(buttons[2])
expect(result.textContent).toBe(‘1211’)
fireEvent.click(buttons[1])
expect(result.textContent).toBe(‘1221’)
fireEvent.click(buttons[0])
expect(result.textContent).toBe(‘1222’)
})

このCodeSandboxで動作するコードを確認してください。https://codesandbox.io/s/pprl4y0wq

私の無料ダウンロードReactハンドブック

Reactコンポーネントのテスト

Jestを使用して最初のReactコンポーネントをテストし、react-testing-library

その他の反応チュートリアル：

Jestを使用して最初のReactコンポーネントをテストし、`react-testing-library`