How to mock React Context for testing component with jest

Question

I want to test if component renders inside render function. Component is wrapped inside Consumer:

const TestComponent = () => (
  <div>
<ItemsContext.Consumer>
            {(value) => (
              <Autos
                autoEnabled={value.autoEnabled}
              />
            )}
          </ItemsContext.Consumer>
  </div>
);

I set context in the upper component:

const AutosWrapper = () => (

      <ItemsContext.Provider value={{ autoEnabled: false, sourcesEnabled: true }}>
        <TestComponent/>
      </ItemsContext.Provider>

)

My test is as follows:

import ItemsContext from '../ItemsContext';

describe('<TestComponent /> Component render', () => {

  let wrapper;

  beforeEach(() => {
    wrapper = shallow(<TestComponent {...props} />);
  });

  describe('<TestComponent /> rendering', () => {


    test('should render child components in <TestComponent /> component', () => {
      const autoContextWrapper = wrapper.find(ItemsContext.Consumer).at(0)
        .renderProp('children')();

      expect(autoContextWrapper.find(Autos).length).toEqual(1);
    });

  });
});

but when I run this test, I have following error - TypeError: Cannot read property 'autoEnabled' of undefined I cannot understand how to pass default values to the context or mock them. I tried such a variant but without success:

ItemsContext.Consumer = jest.fn((props) => props.children({ autoEnabled: false }));

Chris · Accepted Answer · 2020-06-04 09:24:48Z

1

You will have to wrap your component with the provider so that the consumer can access the context. This is especially useful as this enables you to change the context and do assertions based on the given context value.

Example:

import ItemsContext from '../ItemsContext';

describe('<TestComponent /> Component render', () => {
  describe('<TestComponent /> rendering', () => {
    test('should render child components in <SearchResult /> component', () => {
      const wrapper = shallow((
        <ItemsContext.Provider value={{ autoEnabled: true, sourcesEnabled: true }}>
          <TestComponent />
        </ItemsContext.Provider>
      ));

      const autoContextWrapper = wrapper
        .find(ItemsContext.Consumer)
        .at(0)
        .renderProp('children')();

      expect(autoContextWrapper.find(Topics).length).toEqual(1);
    });
  });
});

answered Jun 4, 2020 at 9:24

Chris

6,6911 gold badge25 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

rick1 Over a year ago

I have an error - Method “renderProp” is meant to be run on 1 node. 0 found instead. In the debug method I do not see that component renders at all

rick1 Over a year ago

I added dive() to shallow render in order to fix error “renderProp” is meant to be run on 1 node. 0 found instead', but now I have initial error during tests 'TypeError: Cannot read property 'autoEnabled' of undefined'

Chris Over a year ago

Sorry for the late response, would it be possible to create a code sandbox where this error can be reproduced? I know from experience it can be tricky to get Enzyme working with wrapped components (e.g. providers). Material-UI is using the following function in their tests: github.com/mui-org/material-ui/blob/master/packages/material-ui/…

Collectives™ on Stack Overflow

How to mock React Context for testing component with jest

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related