Enzyme: Can't pass on Context when using with react-redux's connect

[5punk]

Hi Guys,
I've a bit of a situation, when using enzyme for rendering React Components for my unit tests, I cannot pass over the context when I am exporting the component using react-redux's connect.

Let me show you what I mean:

Component:

class TestPage extends Component {
  contextType = {
     a: required
  }
  render() {
    return (<div>1</div>);
  }
}
export default TestPage;

Test:

import { shallow } from 'enzyme';

wrapper = shallow(<TestPage>, {
  context: {
    a: 10
  }
});

This WORKS!

BUT:

Component:

class TestPage extends Component {
  contextType = {
     a: required
  }
  render() {
    return (<div>1</div>);
  }
}
export default connect( state => ({ a: state.runtime.a }))(TestPage);

Test:

import { shallow } from 'enzyme';

wrapper = shallow(<TestPage>, {
  context: {
    a: 10
  }
});

Spits out: Warning: Failed Context Types: Required contextawas not specified inTestPage``

Help... How do I pass on my context through Redux's connect function?

[MQuy]

@5punk it's the same as my issue https://github.com/airbnb/enzyme/issues/435

[aweary]

@MQuy can you try defining a childContextTypes as well? It should work then. I use redux-mock-store and enzyme at work and this works fine.

wrapper = shallow(<TestPage>, {
  context: {
   store: mockStore
  },
  childContextTypes: {
    store: React.PropTypes.Object
  }

[MQuy]

@Aweary I tried, it's still the same, just tested in this repo https://github.com/MQuy/redux-store-enzyme

[aweary]

@MQuy this is exactly what we do internally where I work, so I'll have to try and reproduce when I'm back home to see what's going on 👍

[MQuy]

thank @Aweary 👍

[5punk]

Does rewiring react-redux's connect function make sense?
I was trying to do something like..

import TestPage, { __RewireAPI__ as TestPageRewired } from '../TestPage';

// Rewire React-redux, connect API
  TestPageRewired.__Rewire__('connect', (props) => {
    console.log('Rewired Connect');
    return {
      contextTypes: [{ requiredContext: () => {} }],
      ...props
    };
  });

But this isn't working for me. Am I missing something?

[blainekasten]

closing in favor of #472

[codejamninja]

There's an npm module that makes it really easy to add redux to the react context

https://github.com/jamrizzi/redux-context-provider
https://www.npmjs.com/package/redux-context-provider

import React, { Component } from 'react';
import ReduxContextProvider from 'redux-context-provider';
import createStore from './createStore';
import actions from './actions';
import Routes from './routes';

export default class App extends Component {
  render() {
    return (
      <ReduxContextProvider store={store} actions={actions}>
        <Routes />
      </ReduxContextProvider>
    );
  }
}