[React Testing] Test your Custom Hook Module with react-hooks-testing-library

Posted 2021-02-20 answer1215

It‘s always important to test your code, especially if you‘re open-sourcing it for others to use. In this video, we‘ll learn how to use react-hooks-testing-library to write a few tests for our custom hook.

 

import { useState, useEffect } from ‘react‘

export function useStarWarsQuote() {
  const [quote, setQuote] = useState(‘‘)
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    async function getStarWarsQuote() {
      setLoading(true)
      // Get initial text
      const response = await fetch(
        ‘https://starwars-quote-proxy-gi0d3x1lz.now.sh/api/randomQuote‘
      )
      const data = await response.json()
      const quote = data.starWarsQuote
      setQuote(quote)
      setLoading(false)
    }
    getStarWarsQuote()
  }, [])

  return { quote, loading }
}

 

Test:

import { renderHook } from ‘@testing-library/react-hooks‘
import { useStarWarsQuote } from ‘./‘

describe(‘useStarWarsQuote‘, () => {
  test(‘should return an object with the keys: loading, quote‘, () => {
    // result.current = the value returned by our hook
    const { result } = renderHook(() => useStarWarsQuote())

    expect(result.current).toHaveProperty(‘loading‘)
    expect(result.current).toHaveProperty(‘quote‘)
  })

  test(‘should set loading to true after initial call‘, () => {
    const { result } = renderHook(() => useStarWarsQuote())
    expect(result.current.loading).toBe(true)
  })

  test(‘should return a quote and set loading to false‘, async () => {
    // Add test here
    const { result, waitForNextUpdate } = renderHook(() => useStarWarsQuote())


    await waitForNextUpdate()
    expect(typeof result.current.quote).toBe(‘string‘)
    expect(result.current.quote).not.toBe(null)
    expect(result.current.quote).not.toBe(‘‘)
    expect(result.current.loading).toBe(false)
  })
})