Jest mock react context

Question

I need some help understanding how one can test an application using React Context.

Here's my sample setup.

context.js

import React from 'react'

export const AppContext = React.createContext()

App.js

import React from 'react'

import MyComponent from './MyComponent'
import {AppContext} from './context'

const App extends React.Component {

  state = {
    items: []
  }

  handleItemAdd = newItem => {
    const {items} = this.state
    items.push(newItem)
    this.setState(items)
  }

  render() {
    return (
      <AppContext.Provider value={{
        addItem: this.handleItemAdd
      }}>
        <MyComponent />
      </AppContext.Provider>
    )
  }
}

export default App

MyComponent.js

import React from 'react'

import {AppContext} from './context'

const MyComponent extends React.Component {    
  render() {
    return (
      <AppContext.Consumer>
        {addItem => 
          <button onClick={() => addItem('new item')}>
            Click me
          </button>
        }
      </AppContext.Consumer>
    )
  }
}

export default MyComponent

This is a simplified example. Imagine that there are more layers between App and MyComponent, hence the use of React Context.

And here's my test file for MyComponent.

MyComponent.test.js

import React from 'react'
import {render, fireEvent} from 'react-testing-library'

test('component handles button click', () => {
  const {getByText} = render(
    <MyComponent />
  )
  const button = getByText('Click me')
  fireEvent.click(button)
  expect...?
}

The thing is, AppContext.Consumer is part of the implementation of MyComponent, so in this test I don't have direct access to it. How do I mock AppContext.Consumer so I am actually able to verify that clicking a button fires a function call?

I know that in theory I can test this by rendering MyComponent in my App, but I want to write a unit test for MyComponent only.

take a look into react-testing-library's docs: https://testing-library.com/docs/example-react-context — skyboyer, Jan 21 '19 at 14:52
Thanks for pointing me to the example. So, is manually wrapping `MyComponent` in `AppContext.Provider` in each test the only way then? — artooras, Jan 21 '19 at 14:58
it looks this way. enzyme's `shallow()` allows passing in context as an argument. but react-testing-library does not. — skyboyer, Jan 21 '19 at 15:02
@skyboyer, Enzyme's `shallow` does not work with context in no way. — Green, Mar 05 '20 at 18:41

score 77 · Accepted Answer · edited Jul 27 '20 at 12:25

77

You just render the context with your component.

const addItem = jest.fn()
render(
  <AppContext.Provider value={{ addItem }}>
    <MyComponent />
  </AppContext.Provider>
)

See Mocking context with react-testing-library

edited Jul 27 '20 at 12:25

Melchia

16,699
16
70
93

answered Jan 22 '19 at 09:01

Giorgio Polvara - Gpx

12,268
5
53
55

9

Wow, that was so much simpler than I was expecting, thanks so much! – woolm110 Dec 09 '19 at 14:32

score 1 · Answer 2 · answered Dec 24 '20 at 23:48

I want to add a complete test example by using the solution from @Giorgio. Here we are testing that MyComponent is rendered and that its button will be clicked once.

MyComponent.test.js

import React from 'react'
import { render, fireEvent } from 'react-testing-library'

test('component handles button click', () => {
  const addItem = jest.fn()
  render(
    <AppContext.Provider value={{ addItem }}>
      <MyComponent />
    </AppContext.Provider>
  )
  fireEvent.click(screen.getByText(/click me/))
  expect(addItem).toHaveBeenCalledTimes(1)
}

Jest mock react context

2 Answers2

Linked