无法在酶测试中设置上下文

Question

I'm using a method added to the context which is triggered in the componentDidMount() lifecycle method.

I should be able to stub the context by providing an option to Enzyme's shallow() method, but this does not get passed to my component. For example:

My test:

it('renders without crashing', () => {
  const context = { dispatch: jest.fn() };

  shallow(<MyComponent />, { context });
});

and my component:

import React, { Component } from 'react';
import { Consumer, Context } from '../../context';

class MyComponent extends Component {
  static contextType = Context;

  componentDidMount() {
    const { dispatch } = this.context; // dispatch is `undefined`

    dispatch({ type: 'BLAH', payload: 'blah' });
  }

  etc...

}

this.context is an object, but it has no properties - dispatch is always undefined.

Answer 1

Unfortunately, enzyme doesn't support createContext and contextType yet.

You can see its progress here .

Answer 2

This is quite hacky, but you can use existing support for the legacy API to test components that actually use the new API.

In your case, you can do the following in your test code:

import PropTypes from 'prop-types';

MyComponent.contextTypes = {
    dispatch: PropTypes.any,
};

Now shallow(<MyComponent />, { context }); should shallow render with your desired context value.

Answer 3

You can use module shallow-with-context than enzyme will support contextType .

Then your test can look like:

import { shallow } from 'enzyme';
import { withContext, createContext } from 'shallow-with-context';

it('renders without crashing', () => {
  const context = createContext({ dispatch: jest.fn() });
  const MyComponentWithContext = withContext(MyComponent, context);

  shallow(<MyComponent />, { context });
});