If you are the use of react@>=16.8, then you’ll be able to use hooks and you may have most probably
written a number of customized ones your self. You could have questioned methods to be assured
that your hook continues to paintings over the life of your utility. And I am
now not speaking concerning the one-off customized hook you pull out simply to make your
element frame smaller and arrange your code (the ones will have to be lined via your
element checks), I am speaking about that reusable hook you may have printed to
github/npm (or you may have been speaking along with your criminal division about it).

Let’s consider we have were given this practice hook known as useUndo (impressed via
useUndo via
Homer Chen):

(Notice, it is not tremendous essential that you realize what it does, however you’ll be able to
amplify this in case you are curious):

import * as React from 'react'

const UNDO = 'UNDO'
const REDO = 'REDO'
const SET = 'SET'
const RESET = 'RESET'

serve as undoReducer(state, motion) {
  const {previous, provide, long run} = state
  const {sort, newPresent} = motion

  transfer (motion.sort) {
    case UNDO: {
      if (previous.period === 0) go back state

      const earlier = previous[past.length - 1]
      const newPast = previous.slice(0, previous.period - 1)

      go back {
        previous: newPast,
        provide: earlier,
        long run: [present, ...future],
      }
    }

    case REDO: {
      if (long run.period === 0) go back state

      const subsequent = long run[0]
      const newFuture = long run.slice(1)

      go back {
        previous: [...past, present],
        provide: subsequent,
        long run: newFuture,
      }
    }

    case SET: {
      if (newPresent === provide) go back state

      go back {
        previous: [...past, present],
        provide: newPresent,
        long run: [],
      }
    }

    case RESET: {
      go back {
        previous: [],
        provide: newPresent,
        long run: [],
      }
    }
    default: {
      throw new Error(`Unhandled motion sort: ${sort}`)
    }
  }
}

serve as useUndo(initialPresent) {
  const [state, dispatch] = React.useReducer(undoReducer, {
    previous: [],
    provide: initialPresent,
    long run: [],
  })

  const canUndo = state.previous.period !== 0
  const canRedo = state.long run.period !== 0
  const undo = React.useCallback(() => dispatch({sort: UNDO}), [])
  const redo = React.useCallback(() => dispatch({sort: REDO}), [])
  const set = React.useCallback(
    newPresent => dispatch({sort: SET, newPresent}),
    [],
  )
  const reset = React.useCallback(
    newPresent => dispatch({sort: RESET, newPresent}),
    [],
  )

  go back {...state, set, reset, undo, redo, canUndo, canRedo}
}

export default useUndo

Let’s consider we wish to write a examine for this so we will care for self belief that as
we make adjustments and insect fixes we do not destroy present capability. To get the
most self belief we’d like, we will have to make certain that our checks
resemble the best way the tool will likely be used.
Take into account that tool is all about automating issues that we do not wish to or
can not do manually. Assessments aren’t any other, so imagine how you could examine this
manually, then write your examine to do the similar factor.

A mistake that I see numerous other people make is pondering “smartly, it is only a
serve as proper, that is what we adore about hooks. So can not I simply name the
serve as and assert at the output? Unit checks FTW!” They are now not incorrect. It is
only a serve as, however technically talking, it is not a
natural serve as (your hooks are
intended to be idempotent although).
If the serve as have been natural, then it might be a easy job of calling it and
saying at the output.

If you happen to check out merely calling the serve as in a examine, you are breaking
the principles of hooks and you’ll be able to get
this mistake:

Error: Invalid hook name. Hooks can solely be known as within the frame of a serve as element. This is able to occur for one of the crucial following causes:
  1. You'll have mismatching variations of React and the renderer (akin to React DOM)
  2. You may well be breaking the Regulations of Hooks
  3. You'll have multiple replica of React in the similar app
  See https://facebook.me/react-invalid-hook-call for tips on methods to debug and connect this downside.

(I have gotten that error for all 3 causes discussed 🙈)

Now, you would possibly begin to assume: “Whats up, if I simply mock the integrated React hooks
I am the use of like useState and useEffect then I may nonetheless examine it like a
serve as.” However for the affection of all issues natural, please do not do this. You throw
away a LOT of self belief in doing so.

However do not be concerned, in case you have been to check this manually, slightly merely calling the
serve as, you would most probably write an element that makes use of the hook, after which have interaction
with that element rendered to the web page (in all probability the use of
storybook). So let’s do this as a substitute:

import * as React from 'react'
import useUndo from '../use-undo'

serve as UseUndoExample() {
  const {provide, previous, long run, set, undo, redo, canUndo, canRedo} =
    useUndo('one')
  serve as handleSubmit(occasion) {
    occasion.preventDefault()
    const enter = occasion.goal.components.newValue
    set(enter.price)
    enter.price = ''
  }

  go back (
    <div>
      <div>
        <button onClick={undo} disabled={!canUndo}>
          undo
        </button>
        <button onClick={redo} disabled={!canRedo}>
          redo
        </button>
      </div>
      <shape onSubmit={handleSubmit}>
        <label htmlFor="newValue">New price</label>
        <enter sort="textual content" identity="newValue" />
        <div>
          <button sort="put up">Publish</button>
        </div>
      </shape>
      <div>Provide: {provide}</div>
      <div>Previous: {previous.sign up for(', ')}</div>
      <div>Long term: {long run.sign up for(', ')}</div>
    </div>
  )
}

export {UseUndoExample}

Here is that rendered:

Nice, so now we will examine that hook manually the use of the instance element that is
the use of the hook, so that you could use tool to automate our handbook procedure, we want to
write a examine that does the similar factor we are doing manually. Here is what this is
like:

import {render, display screen} from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import * as React from 'react'

import {UseUndoExample} from '../use-undo.instance'

examine('means that you can undo and redo', () => {
  render(<UseUndoExample />)
  const provide = display screen.getByText(/provide/i)
  const previous = display screen.getByText(/previous/i)
  const long run = display screen.getByText(/long run/i)
  const enter = display screen.getByLabelText(/new price/i)
  const put up = display screen.getByText(/put up/i)
  const undo = display screen.getByText(/undo/i)
  const redo = display screen.getByText(/redo/i)

  // assert preliminary state
  be expecting(undo).toBeDisabled()
  be expecting(redo).toBeDisabled()
  be expecting(previous).toHaveTextContent(`Previous:`)
  be expecting(provide).toHaveTextContent(`Provide: one`)
  be expecting(long run).toHaveTextContent(`Long term:`)

  // upload 2nd price
  enter.price = 'two'
  anticipate userEvent.click on(put up)

  // assert new state
  be expecting(undo).now not.toBeDisabled()
  be expecting(redo).toBeDisabled()
  be expecting(previous).toHaveTextContent(`Previous: one`)
  be expecting(provide).toHaveTextContent(`Provide: two`)
  be expecting(long run).toHaveTextContent(`Long term:`)

  // upload 3rd price
  enter.price = '3'
  anticipate userEvent.click on(put up)

  // assert new state
  be expecting(undo).now not.toBeDisabled()
  be expecting(redo).toBeDisabled()
  be expecting(previous).toHaveTextContent(`Previous: one, two`)
  be expecting(provide).toHaveTextContent(`Provide: 3`)
  be expecting(long run).toHaveTextContent(`Long term:`)

  // undo
  anticipate userEvent.click on(undo)

  // assert "undone" state
  be expecting(undo).now not.toBeDisabled()
  be expecting(redo).now not.toBeDisabled()
  be expecting(previous).toHaveTextContent(`Previous: one`)
  be expecting(provide).toHaveTextContent(`Provide: two`)
  be expecting(long run).toHaveTextContent(`Long term: 3`)

  // undo once more
  anticipate userEvent.click on(undo)

  // assert "double-undone" state
  be expecting(undo).toBeDisabled()
  be expecting(redo).now not.toBeDisabled()
  be expecting(previous).toHaveTextContent(`Previous:`)
  be expecting(provide).toHaveTextContent(`Provide: one`)
  be expecting(long run).toHaveTextContent(`Long term: two, 3`)

  // redo
  anticipate userEvent.click on(redo)

  // assert undo + undo + redo state
  be expecting(undo).now not.toBeDisabled()
  be expecting(redo).now not.toBeDisabled()
  be expecting(previous).toHaveTextContent(`Previous: one`)
  be expecting(provide).toHaveTextContent(`Provide: two`)
  be expecting(long run).toHaveTextContent(`Long term: 3`)

  // upload fourth price
  enter.price = '4'
  anticipate userEvent.click on(put up)

  // assert ultimate state (be aware the loss of "3rd")
  be expecting(undo).now not.toBeDisabled()
  be expecting(redo).toBeDisabled()
  be expecting(previous).toHaveTextContent(`Previous: one, two`)
  be expecting(provide).toHaveTextContent(`Provide: 4`)
  be expecting(long run).toHaveTextContent(`Long term:`)
})

I love this type of manner for the reason that examine is rather simple to practice and
perceive. In maximum eventualities, that is how I’d counsel checking out this type
of a hook.

On the other hand, on occasion the element that you want to put in writing is lovely difficult
and you find yourself getting examine disasters now not for the reason that hook is damaged, however as a result of
the instance you wrote is which is lovely irritating.

That downside is compounded via every other one. In some eventualities on occasion you will have
a hook that may be tricky to create a unmarried instance for all of the use circumstances it
helps so that you finally end up making a host of various instance parts to check.

Now, having the ones instance parts is most probably a good suggestion anyway (they are
nice for storybook as an example), however on occasion it
will also be great to create somewhat helper that does not in fact have any UI
related to it and also you have interaction with the hook go back price without delay.

Here is an instance of what that may be like for our useUndo hook:

import * as React from 'react'
import {render, act} from '@testing-library/react'
import useUndo from '../use-undo'

serve as setup(...args) {
  const returnVal = {}
  serve as TestComponent() {
    Object.assign(returnVal, useUndo(...args))
    go back null
  }
  render(<TestComponent />)
  go back returnVal
}

examine('means that you can undo and redo', () => {
  const undoData = setup('one')

  // assert preliminary state
  be expecting(undoData.canUndo).toBe(false)
  be expecting(undoData.canRedo).toBe(false)
  be expecting(undoData.previous).toEqual([])
  be expecting(undoData.provide).toEqual('one')
  be expecting(undoData.long run).toEqual([])

  // upload 2nd price
  act(() => {
    undoData.set('two')
  })

  // assert new state
  be expecting(undoData.canUndo).toBe(true)
  be expecting(undoData.canRedo).toBe(false)
  be expecting(undoData.previous).toEqual(['one'])
  be expecting(undoData.provide).toEqual('two')
  be expecting(undoData.long run).toEqual([])

  // upload 3rd price
  act(() => {
    undoData.set('3')
  })

  // assert new state
  be expecting(undoData.canUndo).toBe(true)
  be expecting(undoData.canRedo).toBe(false)
  be expecting(undoData.previous).toEqual(['one', 'two'])
  be expecting(undoData.provide).toEqual('3')
  be expecting(undoData.long run).toEqual([])

  // undo
  act(() => {
    undoData.undo()
  })

  // assert "undone" state
  be expecting(undoData.canUndo).toBe(true)
  be expecting(undoData.canRedo).toBe(true)
  be expecting(undoData.previous).toEqual(['one'])
  be expecting(undoData.provide).toEqual('two')
  be expecting(undoData.long run).toEqual(['three'])

  // undo once more
  act(() => {
    undoData.undo()
  })

  // assert "double-undone" state
  be expecting(undoData.canUndo).toBe(false)
  be expecting(undoData.canRedo).toBe(true)
  be expecting(undoData.previous).toEqual([])
  be expecting(undoData.provide).toEqual('one')
  be expecting(undoData.long run).toEqual(['two', 'three'])

  // redo
  act(() => {
    undoData.redo()
  })

  // assert undo + undo + redo state
  be expecting(undoData.canUndo).toBe(true)
  be expecting(undoData.canRedo).toBe(true)
  be expecting(undoData.previous).toEqual(['one'])
  be expecting(undoData.provide).toEqual('two')
  be expecting(undoData.long run).toEqual(['three'])

  // upload fourth price
  act(() => {
    undoData.set('4')
  })

  // assert ultimate state (be aware the loss of "3rd")
  be expecting(undoData.canUndo).toBe(true)
  be expecting(undoData.canRedo).toBe(false)
  be expecting(undoData.previous).toEqual(['one', 'two'])
  be expecting(undoData.provide).toEqual('4')
  be expecting(undoData.long run).toEqual([])
})

I believe like this examine lets in us to have interaction extra without delay with the hook (which
is why the act is needed), and that permits us to hide extra circumstances that can
be tricky to put in writing element examples for.

Now, on occasion you will have extra difficult hooks the place you want to look ahead to mocked
HTTP requests to complete, or you wish to have to “rerender” the element that is the use of
the hook with other props and so on. Each and every of those use circumstances complicates your
setup serve as or your genuine global instance which is able to make it much more
domain-specific and tough to practice.

That is why renderHook from
@testing-library/react
exists. Here is what this examine could be like if we use @testing-library/react:

import {renderHook, act} from '@testing-library/react'
import useUndo from '../use-undo'

examine('means that you can undo and redo', () => {
  const {outcome} = renderHook(() => useUndo('one'))

  // assert preliminary state
  be expecting(outcome.present.canUndo).toBe(false)
  be expecting(outcome.present.canRedo).toBe(false)
  be expecting(outcome.present.previous).toEqual([])
  be expecting(outcome.present.provide).toEqual('one')
  be expecting(outcome.present.long run).toEqual([])

  // upload 2nd price
  act(() => {
    outcome.present.set('two')
  })

  // assert new state
  be expecting(outcome.present.canUndo).toBe(true)
  be expecting(outcome.present.canRedo).toBe(false)
  be expecting(outcome.present.previous).toEqual(['one'])
  be expecting(outcome.present.provide).toEqual('two')
  be expecting(outcome.present.long run).toEqual([])

  // upload 3rd price
  act(() => {
    outcome.present.set('3')
  })

  // assert new state
  be expecting(outcome.present.canUndo).toBe(true)
  be expecting(outcome.present.canRedo).toBe(false)
  be expecting(outcome.present.previous).toEqual(['one', 'two'])
  be expecting(outcome.present.provide).toEqual('3')
  be expecting(outcome.present.long run).toEqual([])

  // undo
  act(() => {
    outcome.present.undo()
  })

  // assert "undone" state
  be expecting(outcome.present.canUndo).toBe(true)
  be expecting(outcome.present.canRedo).toBe(true)
  be expecting(outcome.present.previous).toEqual(['one'])
  be expecting(outcome.present.provide).toEqual('two')
  be expecting(outcome.present.long run).toEqual(['three'])

  // undo once more
  act(() => {
    outcome.present.undo()
  })

  // assert "double-undone" state
  be expecting(outcome.present.canUndo).toBe(false)
  be expecting(outcome.present.canRedo).toBe(true)
  be expecting(outcome.present.previous).toEqual([])
  be expecting(outcome.present.provide).toEqual('one')
  be expecting(outcome.present.long run).toEqual(['two', 'three'])

  // redo
  act(() => {
    outcome.present.redo()
  })

  // assert undo + undo + redo state
  be expecting(outcome.present.canUndo).toBe(true)
  be expecting(outcome.present.canRedo).toBe(true)
  be expecting(outcome.present.previous).toEqual(['one'])
  be expecting(outcome.present.provide).toEqual('two')
  be expecting(outcome.present.long run).toEqual(['three'])

  // upload fourth price
  act(() => {
    outcome.present.set('4')
  })

  // assert ultimate state (be aware the loss of "3rd")
  be expecting(outcome.present.canUndo).toBe(true)
  be expecting(outcome.present.canRedo).toBe(false)
  be expecting(outcome.present.previous).toEqual(['one', 'two'])
  be expecting(outcome.present.provide).toEqual('4')
  be expecting(outcome.present.long run).toEqual([])
})

You’ll be able to realize it is similar to our customized setup serve as. Underneath the hood,
@testing-library/react is doing one thing similar to our unique setup
serve as above. A couple of different issues we get from @testing-library/react are:

• Software to “rerender” the element that is rendering the hook (to check impact
  dependency adjustments as an example)
• Software to “unmount” the element that is rendering the hook (to check impact
  cleanup purposes as an example)
• A number of async utilities to attend an unspecified period of time (to check async
  good judgment)

Notice, you can examine greater than a unmarried hook via merely calling all of the hooks
you wish to have within the callback serve as you go to renderHook.

Writing a “test-only” element to enhance a few of these calls for an excellent quantity
of error-prone boilerplate and you’ll be able to finally end up spending extra time writing and
checking out your examine parts than the hook you are seeking to examine.

To be transparent, if I have been writing and checking out the particular useUndo hook, I’d
pass with the real-world instance utilization. I believe it makes the most productive trade-off
between understandability and protection of our use circumstances. However there are
certainly extra difficult hooks the place the use of @testing-library/react is extra
helpful.