[Feature Request] createContext() not supported in enzyme.

[hyochan]

I'd like to know how to test provider for context api. I've found some tutorials on testing consumer but no tutorial exists for testing provider itself.

import React, { createContext } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import ProfileModal from '../components/shared/ProfileModal';

const ProfileModalContext = createContext();

export const ProfileModalConsumer = ProfileModalContext.Consumer;

export class ProfileModalProvider extends React.Component {
  static modal;

  state = {
    user: null,
  };

  actions = {
    setModal: (v) => {
      console.log('setModal', v);
      this.modal = v;
    },
    showModal: (user) => {
      console.log('showModal');
      this.setState({ user }, () => {
        if (this.modal) {
          console.log('openModal');
          this.modal.showAddBtn(true);
          this.modal.open();
        }
      });
    },
    onChatPressed: (navigation) => {
      if (this.modal) {
        this.modal.close();
      }
      navigation.navigate('Chat');
    }
  };

  render() {
    const { state, actions, modal } = this;
    const value = { state, actions, modal };
    return (
      <ProfileModalContext.Provider value={value}>
        {this.props.children}
        <ProfileModal
          id='profile_modal'
          ref={(v) => {
            console.log('v', v);
            this.modal = v;
          }}
          onChatPressed={ () => this.actions.onChatPressed(this.props.navigation) }
        />
      </ProfileModalContext.Provider>
    );
  }
}

I've tried making test code for above provder.

import 'react-native';
import * as React from 'react';
import { ProfileModalProvider } from '../ProfileModalProvider';

// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';
import { shallow, render } from 'enzyme';

describe('rendering test', () => {
  const wrapper = shallow(
    <ProfileModalProvider />,
  ).dive();

  it('renders as expected', () => {
    expect(wrapper).toMatchSnapshot();
  });
});

describe('interaction', () => {
  const context = {
    state: {
      user: null,
    },
    actions: {
      setModal: jest.fn(),
      showModal: jest.fn(),
      onChatPressed: jest.fn(),
    }
  };
  let props;
  let wrapper;
  beforeEach(() => {
    props = {
      navigation: {
        navigate: jest.fn(),
      },
      ...context,
    };
    wrapper = shallow(<ProfileModalProvider props={props}/>);
  });
  describe('clicking the button', () => {
    it('should call onChatPressed', () => {
      const btn = wrapper.find('#profile_modal');
      btn.props().onPress();
      expect(context.actions.onChatPressed).toBeCalled();
    });
  });
});

The result.

I am trying to work on open source project(talktalk-rn). The code is provided there if you need more information.

[ljharb]

enzyme does not yet support the createContext API.

[hyochan]

For those who are interested in this, we've tried to move createContext() separately somewhere like src/contexts and done the rest of the test. Here is the sourcecode and the project.

[ljharb]

I’m going to keep this open, pending support of createContext.

[sol404]

Waiting this feature request, here's a workaround work for me.

const outer = shallow(<SimpleComp />);
const Children = outer.props().children({ /* context */ });
const wrapper = shallow(Children);