Testing ReactJS Context - A Guide with test-doubles

In this post, I'll walk through my thought process for testing React components that rely on context, using Testing Library. My aim is to explore a different approach to testing these components, examining the pros and cons of using mocks versus testing without mocking the context. We'll look at how each approach impacts the tests' reliability, and I'll share insights on when and why one method may be more beneficial than the other in real-world applications.

What you should know

• What reactjs is used for (probably you have written some apps already)
• What is vitest

What is react context

The ReactJS context emerged as a solution to a common problem in the structure of ReactJS components: prop drilling. Prop drilling occurs when we have a chain of components that need to access the same set of data. The context mechanism allows components to share the same set of data as long as the context itself is the first descendant.

In the reactjs documentation, the context for holding the theme is used, as other component might need this information the docs use the context to handle that instead of passing the value via props. Another example is the usage of context to hold the layout of the application, in the json-tool example the App.tsx wraps the application with a DefaultLayout context that is available for all the application.

The app for this example

For the example that follows the theme app will be used. It is an application that allows users to switch between light/dark themes. The app is also used in the reactjs official documentation. This application consist of a simple toggle that switches between light theme mode and dark theme mode. The application is as simple as it gets and we can plot everything in a single file:

import { createContext, useContext, useState } from 'react'
const ThemeContext = createContext('light')

function Page() {
  const theme = useContext(ThemeContext)
  return (
    <div>
      <p>current theme: {theme}</p>
    </div>
  )
}

function App() {
  const [theme, setTheme] = useState('light')
  return (
    <ThemeContext.Provider value={theme}>
      <button
        className={theme}
        onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
      >
        Toggle
      </button>
      <Page />
    </ThemeContext.Provider>
  )
}

export default App

In this application, we have two main components: App and Page. The App component serves as the main component and contains the state for the current theme, which can be either "light" or "dark". It also includes a button that toggles the theme between light and dark modes. The Page component is a child of App and consumes the theme context to display the current theme. The button in the App component is a simple toggle button that, when clicked, switches the theme and updates the context value accordingly.

In the next section we will talk about slicing the components for testing.

The ignite for testing

Usually in any application we would have to focus on what kind of test we want to do, and which slice we want to tackle. For example, we could target a single component, instead of the entire application. In our example, we will start with the Page component. Which will require us to use test-doubles to test it.

The test-double comes from the app structure itself, as it depends on the context, to change it, the value in the context needs to change as well.

Test-doubles

To get started with our testing approach with context in reactjs we will start writing the first test:

import { render, screen } from '@testing-library/react'
import { Page } from './Page'

describe('<Page />', () => {
  it('should render light as default theme', () => {
    render(<Page />)
    expect(screen.getByText('current theme: light')).toBeInTheDocument()
  })
})

This test will pass as expected, given that the light theme is set to be the default one in the ThemeContext. We could even test drive this first example as well, however, the things get interesting in the second test, when we are interested in the dark theme. To get in to the dark theme, we need to start using test-doubles, given that we depend on the reactjs context to do that. The second test brings the vi.mock to the mix as well as the vi.mocked. Note that the second test to be written also required the first one to be changed.

import { render, screen } from '@testing-library/react'
import { Page } from './Page'
import { useContext } from 'react'

vi.mock('react', () => {
  return {
    ...vi.importActual('react'),
    useContext: vi.fn(),
    createContext: vi.fn()
  }
})

describe('<Page />', () => {
  it('should render light as default theme', () => {
    vi.mocked(useContext).mockReturnValue('light')
    render(<Page />)
    expect(screen.getByText('current theme: light')).toBeInTheDocument()
  })

  it('should render dark theme', () => {
    vi.mocked(useContext).mockReturnValue('dark')
    render(<Page />)
    expect(screen.getByText('current theme: dark')).toBeInTheDocument()
  })
})

Both test cases now are using a fake to test drive the application. If we change the return data from the context, the test will also change. The points of attention here are:

• We are mocking reactjs context which hurst the "don't mock what you don't own principle"
• The test become more verbose, since we are required to use mocking to do that
• The two tests we have written don't reflect the user interaction with the application. We know that the theme will change when the toggle button is hit.

The completed code used in this section is available on GitHub

Without test-doubles

The next approach is to use the context embedded into our application, without isolating it or using any test-double. If we take this approach with TDD, we can start with a very simple test that simulates how the user will behave:

import { render, screen } from '@testing-library/react'
import App from './App'
import userEvent from '@testing-library/user-event'

describe('<App />', () => {
  it('should render toggle button', () => {
    render(<App />)
    expect(screen.getByText('Toggle')).toBeInTheDocument()
  })
})

Then following to the second test, that we would like to set the light theme by default:

import { render, screen } from '@testing-library/react'
import App from './App'
import userEvent from '@testing-library/user-event'

describe('<App />', () => {
  it('should render toggle button', () => {
    render(<App />)
    expect(screen.getByText('Toggle')).toBeInTheDocument()
  })

  it('should render light as default theme', () => {
    render(<App />)
    expect(screen.getByText('current theme: light')).toBeInTheDocument()
  })
})

and last but not least the theme switching:

import { render, screen } from '@testing-library/react'
import App from './App'
import userEvent from '@testing-library/user-event'

describe('<App />', () => {
  it('should render toggle button', () => {
    render(<App />)
    expect(screen.getByText('Toggle')).toBeInTheDocument()
  })

  it('should render light as default theme', () => {
    render(<App />)
    expect(screen.getByText('current theme: light')).toBeInTheDocument()
  })

  it('should render dark theme on toggle', async () => {
    const user = userEvent.setup()
    render(<App />)

    await user.click(screen.getByText('Toggle'))

    expect(screen.getByText('current theme: dark')).toBeInTheDocument()
  })
})

Points of attention to this strategy:

• Test-doubles are not required, it makes the test with less code
• The behaviour of the test matches what the user will do in the real application

The completed code used in this section is available on GitHub

Pros and cons of each approach

In this sections we will go over the pros and cons of each approach in regards to different properties.

Refactoring to props

Using a test-double for the context makes the test fragile for this kind of change. Refactoring the usage of useContext with props automatically makes the test to fail even when the behaviour doesn't. Using the option that doesn't use test-doubles supports refactoring in that sense.

Creating a custom context

The same happens to using a custom context instead of relying on the context provider from reactjs directly. Using the option without test-doubles enables refactoring.

Conclusion

In this guide, we explored how to test components that rely on context, without the need for test-doubles, making the tests more straightforward, closer to real user interactions and contrasting pros and cons of each approach. Whenever possible, using the simples approach that reflects the user interaction should be followed. However, when test-doubles are required, they should be used targeting the maintainability of the test code. Having a simple test enables refactoring in the production code with confidence.

Resources

• Creating a custom context
• The refactoring catalog
• used to find how to mock specific part of a module with vitest
• used to find how to fix type issue
• testing library userEvent

Next Steps

• Try testing more complex scenarios involving multiple contexts or nested providers.
• While we avoided mocks in this guide, there are cases where mocking is necessary. Explore advanced mocking techniques for those scenarios.

By following these steps, you can continue to improve your testing skills and ensure your React applications are open to refactoring.