useReducer

[Tradução Beta Não Oficial]

Esta página foi traduzida por PageTurner AI (beta). Não é oficialmente endossada pelo projeto. Encontrou um erro? Reportar problema →

Exemplo básico mostrando como testar o hook useReducer. O ponto mais importante é que não testamos o reducer diretamente - ele é um detalhe de implementação do componente! Em vez disso, testamos a interface do componente.

O componente que estamos testando altera um texto dependendo do estado 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

Estamos testando para verificar se obtemos a saída correta em nosso JSX com base no estado do reducer.

// 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()
})