Sections

Context

// AppContext.js
import React from 'react'
	  
// Create a React context and set the default text value to an empty string
export const AppContext = React.createContext({
  text: '',
})
	  
// Create a custom hook to make it easier to access the context
export const useApp = () => React.useContext(AppContext)

// App.js
import { AppContext, useApp } from './AppContext'
	  
export const Text = () => {
  const { text } = useApp()
	  
  return <div>{text}</div>
}
	  
export default function App({ text }) {
  return (
    <AppContext.Provider value={{ text }}>
      <Text />
    </AppContext.Provider>
  )
}

// App.test.js
import App, { Text } from './App'
import { screen, render } from '@testing-library/react'
	  
// All the tests we'll create prepared as TODOs
test.todo('renders app')
test.todo('Text using a mocked useApp hook')
test.todo('Text by importing the context')

// App.test.js
	  
test('renders app', () => {
  // Render the App component and pass a text prop
  // The text prop is added to the context
  render(<App text="Frontend testing is fun!" />)
	  
  // Assert that the document contains a text with the value
  // that we passed to the context. The toBeInTheDocument assertion comes
  // from @testing-library/jest-dom
  expect(screen.getByText(/frontend testing is fun/i)).toBeInTheDocument()
})

// App.test.js
// This import will be a mocked version as defined by jest.mock below
import { useApp } from './AppContext'
		  		  
// This is a mock that automatically determines what the file contains
// and provides mocked functions for each exported value
jest.mock('./AppContext')
	  
// Mock the response of the useApp hook before each test runs
beforeEach(() => {
  useApp.mockReturnValue({
    text: 'Frontend testing is fun!',
  })
})
		  
test('Text using a mocked useApp hook', () => {
  // Render the Text component
  render(<Text />)
		  		  
  // Since the useApp hook is now mocked, we'll get a passing text
  expect(screen.getByText(/frontend testing is fun/i)).toBeInTheDocument()
})

// App.test.js
// Import the AppContext, note that this is the real version and
// not a mocked version
import { AppContext } from './AppContext'
	  
test('Text by importing the context', () => {
  // Wrap our Text component in the AppContext.Provider and
  // provide it with the value we want displayed in the Text component
  render(
    <AppContext.Provider value={{ text: 'Frontend testing is fun' }}>
      <Text />
    </AppContext.Provider>
  )
	  
  expect(screen.getByText(/frontend testing is fun/i)).toBeInTheDocument()
})

import App, { Text } from './App'
import { screen, render } from '@testing-library/react'
import { AppContext } from './AppContext'
	  
test('renders app', () => {
  render(<App text="Frontend testing is fun!" />)
	  
  expect(screen.getByText(/frontend testing is fun/i)).toBeInTheDocument()
})
	  
test('Text by importing the context', () => {
  render(
    <AppContext.Provider value={{ text: 'Frontend testing is fun' }}>
      <Text />
    </AppContext.Provider>
  )
	  
  expect(screen.getByText(/frontend testing is fun/i)).toBeInTheDocument()
})

Async

// App.js
import { useQuery, QueryClient, QueryClientProvider } from 'react-query'
	  
// Create a client for making queries
const queryClient = new QueryClient()
	  
// Call the Star Wars API and return the JSON data
// This can be any function, as long as it returns a promise
const fetchLuke = async () => {
  const response = await fetch('https://swapi.dev/api/people/1/')
  return response.json()
}
	  
const Luke = () => {
  // Set up the useQuery hook with a unique key, 'luke', which is used
  // for caching and pass our fetching function
  const { isLoading, data } = useQuery('luke', fetchLuke)
	  
  // Loading state
  if (isLoading) {
    return <div>Loading...</div>
  }
	  
  // Display the name of the character
  return <div>{data.name}</div>
}
	  
export default function App() {
  return (
    // Set up the provider with the client we created
    <QueryClientProvider client={queryClient}>
      <Luke />
    </QueryClientProvider>
  )
}

// App.test.js
import App from './App'
import { screen, render } from '@testing-library/react'
	  
test.todo('renders loading state')
test.todo('renders data')

// App.test.js
test('renders loading state', () => {
  // Render the App component
  render(<App />)
	  
  // Assert 
  expect(screen.getByText(/loading.../i)).toBeInTheDocument()
})

// Make the test asynchronous by adding async to the callback
test('renders data', async () => {
  render(<App />)
	  
  // Using await and a findBy* query the assertion will wait until the
  // document contains the text we're looking for. If it takes too long
  // the test will timeout.
  expect(await screen.findByText(/luke skywalker/i)).toBeInTheDocument()
  
  // This assertion checks that we're no longer rendering the loading state.
  // It uses queryBy* since a getBy* or findBy* would throw errors if they
  // can't find the element
  expect(screen.queryByText(/loading.../)).not.toBeInTheDocument()
})

beforeEach(() => {
  global.fetch = jest.fn().mockResolvedValue({
    json: jest.fn().mockResolvedValue({
      // Use a name we know won't be returned from the API to ensure
      // that we're calling our mock. Be sure to update the assertion
      // as well. Kudos to a colleague for pointing this out!
      name: 'Mocked Skywalker',
    }),
  })
})

Custom hooks

// useCustomHook.js
import React from 'react'
	  
export const useCustomHook = () => {
  const [state] = React.useState('Initial')
	  
  return state
}

// useCustomHook.test.js
import { act, renderHook } from '@testing-library/react-hooks'
import { useCustomHook } from './useCustomHook'
	  
test.todo('custom hook return state')
test.todo('custom hook with custom initial value')
test.todo('custom hook with updater')

// useCustomHook.test.js
	  
test('custom hook return state', () => {
  // We use the renderHook utility to wrap our custom hook. This will return
  // an object with the current value of the hook and as well as any errors
  const { result } = renderHook(() => useCustomHook())
	  
  // result.current is the current value that is returned
  expect(result.current).toEqual('Initial')
})

// useCustomHook.test.js
	  
test('custom hook with custom initial value', () => {
  // Pass in an initial value to the hook
  const { result } = renderHook(() => useCustomHook('newInitial'))
	  
  // Assert that the hook takes our passed value
  expect(result.current).toEqual('newInitial')
})
	  
// Once we've confirmed that the test is indeed failing we can
// make the necessary updates that will make it pass
	  
// useCustomHook.js
// Add the ability to pass in a value, but set the default value – which
// is used if no value is passed – to what we had before 'Initial'.
// This will make sure that our first test doesn't break
export const useCustomHook = (initial = 'Initial') => {
  const [state] = React.useState(initial)
	  
  return state
}

// useCustomHook.test.js
	  
// We now want to return two values from our hook, the current value and
// a function to update the value with. Let's use the same style as useState
// uses, an array with two values: [value, updateFunction]
	  
test('custom hook return state', () => {
  const { result } = renderHook(() => useCustomHook())
  
  // The current value will now be the first item in an array
  expect(result.current[0]).toEqual('Initial')
})
	  
test('custom hook with custom initial value', () => {
  const { result } = renderHook(() => useCustomHook('newInitial'))
	  
  // The current value will now be the first item in an array
  expect(result.current[0]).toEqual('newInitial')
})
	  
test('custom hook with updater', () => {
  const { result } = renderHook(() => useCustomHook())
	  
  // The act utility is used to make the test run closer to how
  // React actually calls it in the browser. The test passes without
  // the act, but we would see an error in the test runner
  act(() => {
    // Call the second item of the returned array with our updated value
    result.current[1]('newInitial')
  })
	  
  // Assert that our value is the updated one
  expect(result.current[0]).toEqual('newInitial')
})
	  
// Finally once are tests are updated, we can rebuild the hook to make
// all tests pass
	  
// useCustomHook.js
// Since we're now returning exactly the same as what useState returns
// [state, setState], we can simply return the useState hook.
export const useCustomHook = (initial = 'Initial') => React.useState(initial)