React Context.Consumer mocking

AppWithContext.js

import React, { Component } from 'react';

import FruitContext from './FruitContext';
import FruityComponent from './FruityComponent';

export class App extends Component {
  state = {
    fruit: 'apple',
  }

  render() {
    return (
      <FruitContext.Provider value={this.state.fruit}>
        <FruityComponent />
      </FruitContext.Provider>
    );
  }
}

FruitContext.js

import { createContext } from 'react';

export default createContext('banana');

FruityComponent.js

import React from 'react';

import FruitContext from './FruitContext';
import FruityHeader from './FruityHeader';

export default () => (
  <FruitContext.Consumer>
    {fruit => (
      <FruityHeader>{fruit}</FruityHeader>
     )}
  </FruitContext.Consumer>
);

FruityComponent.spec.js

import React from 'react';
import { mount } from 'enzyme';

import FruityComponent from './FruityComponent';

const mockContext = jest.fn();
jest.mock('./FruitContext', () => ({
  Consumer: ({ children }) => children(mockContext()),
}));

describe('FruityComponent', () => {
  beforeEach(() => {
    mockContext.mockReset();  
  });
  
  ['banana', 'apple', 'kumquat'].map(fruit =>
    test(`should pass ${fruit} context to FruityHeader`, () => {
      mockContext.mockReturnValue(fruit);
    
      const fruityHeader = mount(<FruityComponent />).find('FruityHeader');
                            
      expect(fruityHeader.prop('children')).toEqual(fruit);
    }));
});

This is obviously an inappropriate use case for contexts, but should provide an easy to understand example for mocking context consumers in our tests.

How would you test AppWithContext.js?

Downside is you would have to have the jest.mock and mockContext.mockReset in every test that required mock context. Why not globally mock the module (https://jestjs.io/docs/en/manual-mocks)?