useReducer

useReducerフックをテストする方法を示す基本的な例。一番重要なことは、リデューサーを直接テストしないことです。リデューサーはコンポーネントの実装の詳細です! 代わりに、コンポーネントのインターフェイスをテストします。

テストするコンポーネントは、isConfirmed状態に応じてテキストを変更します。

// example.js

import React, {useReducer} from 'react'

const initialState = {
  isConfirmed: false,
}

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'SUCCESS':
      return {
        ...state,
        isConfirmed: true,
      }
    default:
      throw Error('unknown action')
  }
}

const Example = () => {
  const [state, dispatch] = useReducer(reducer, initialState)

  return (
    <div>
      <div>
        {state.isConfirmed ? (
          <p>Confirmed!</p>
        ) : (
          <p>Waiting for confirmation...</p>
        )}
      </div>
      <button onClick={() => dispatch({type: 'SUCCESS'})}>Confirm</button>
    </div>
  )
}

export default Example

リデューサーの状態に基づいて、JSXに正しい出力が表示されるかどうかをテストします。

// example.test.js

import React from 'react'
import {render, fireEvent} from '@testing-library/react'
import Example from './example.js'

it('shows success message after confirm button is clicked', () => {
  const {getByText} = render(<Example />)

  expect(getByText(/waiting/i)).toBeInTheDocument()

  fireEvent.click(getByText('Confirm'))

  expect(getByText('Confirmed!')).toBeInTheDocument()
})