get state from redux react component in jest unit test - reactjs

Question

It seems like you can't test state in react components once you make them connected components. Anyone know why? To illustrate the point, I have a test for a react component that passes without redux and fails as soon as you make it connected.
// MyComponent.jsx
import React from 'react'
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
foo: 'bar'
};
}
render() {
return <div></div>
}
}
export default MyComponent
Here is the passing test:
// MyComponent.test.js
import React from 'react'
import MyComponent from '../src/components/MyComponent'
import { mount } from 'enzyme'
describe('MyComponent', () => {
describe('interactions', () => {
let wrapper
beforeEach(() => {
wrapper = shallow(<MyComponent />)
})
it('foo to equal bar', () => {
expect(wrapper.state().foo).toEqual('bar')
})
})
})
Now I'm introducing Redux and connecting the component:
// MyComponent.jsx
...
export default connect(function (state){
return {
currentUser: state.currentUser
}
})(MyComponent);
And here is the updated test:
// MyComponent.test.js
import React from 'react'
import MyComponent from '../src/components/MyComponent'
import { mount } from 'enzyme'
import configureStore from 'redux-mock-store'
describe('MyComponent', () => {
const state = {}
const mockStore = configureStore()
describe('interactions', () => {
let wrapper
beforeEach(() => {
wrapper = mount(<MyComponent store={ mockStore(state) } />)
})
it('foo to equal bar', () => {
expect(wrapper.state().foo).toEqual('bar')
})
})
})

Answer 1

I would recommend just exporting both the connect() (the default export) and the actual component itself.
This way you can test the component separately outside of the connected version of the component.
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
foo: 'bar'
};
}
render() {
return <div></div>
}
}
export MyComponent
export default connect(function (state){
return {
currentUser: state.currentUser
}
})(MyComponent);
and then the test:
import { MyComponent } from '../src/components/MyComponent'
import { mount } from 'enzyme'
describe('MyComponent', () => {
describe('interactions', () => {
let wrapper
beforeEach(() => {
wrapper = shallow(<MyComponent />)
})
it('foo to equal bar', () => {
expect(wrapper.state().foo).toEqual('bar')
})
})
})

Answer 2

That's because connect() generates a wrapper component that manages the store interaction process. In your second snippet, <MyComponent> is now the component generated by connect(), not your original component. You would need to dig another level of nesting deeper in the render hierarchy to check on the contents of the real component's state.