Cannot find store in redux connect in a Jest Test - redux

Question

I am getting the following error while trying to setup a component in my jest test :
Invariant Violation: Could not find "store" in either the context or
props of "Connect(TestComponent)". Either wrap the root component in a
, or explicitly pass "store" as a prop to
"Connect(TestComponent)".
My test looks like this :
import React from 'react';
import { shallow } from 'enzyme';
import { Map } from 'immutable';
import { createStore } from 'redux';
import TestComponent from '../TestComponent ';
import { Provider } from 'react-redux';
describe('test ', () => {
test(' testing', () => {
const state = { blah: 1 };
const reducer = s => s; //dummy reducer
const store = createStore(reducer, state);
const component = (
<Provider store={store}>
<TestComponent />
</Provider>
);
const wrapper = shallow(component);
let json = wrapper.html();
expect(json).toMatchSnapshot();
});
});
and the component being tested looks like this :
import React, { Component } from 'react';
import { connect } from 'react-redux';
class TestComponent extends Component {
render = () => {};
}
function mapStateToProps(state) {
return { blah: state };
}
export default connect(
mapStateToProps,
null
)(TestComponent);
I'm not exactly sure what is wrong with this. It all looks kosher to me. When calling html() it cannot find the store.

Answer 1

Try making your wrapper component a function instead of variable:
export const testWrapper = Component => {
return (
<Provider store={store}>
{Component}
</Provider>
);
};
const wrapper = shallow(testWrapper(<TestComponent/>));
let json = wrapper.html();
expect(json).toMatchSnapshot();
Also I'd recommend looking into redux-mock-store for testing.

Answer 2

Here is the solution, you need to create mocked store and pass it to the component wrapped by connect function.
index.ts:
import React, { Component } from 'react';
import { connect } from 'react-redux';
interface ITestComponentProps {
blah: any;
store: any;
}
export class TestComponent extends Component<ITestComponentProps> {
constructor(props) {
super(props);
}
public render() {
return <div>{this.props.blah}</div>;
}
}
function mapStateToProps(state) {
return { blah: state };
}
export default connect(mapStateToProps)(TestComponent);
Unit test:
import React from 'react';
import { shallow } from 'enzyme';
import ConnectedTestComponent, { TestComponent } from './';
import configureMockStore from 'redux-mock-store';
const state = 1;
const mockStore = configureMockStore();
const store = mockStore(state);
describe('test', () => {
it('t1', () => {
const connetedTestComponentWrapper = shallow(<ConnectedTestComponent store={store} />);
const testComponentWrapper = connetedTestComponentWrapper.find(TestComponent);
expect(testComponentWrapper.prop('blah')).toBe(state);
expect(testComponentWrapper.html()).toMatchSnapshot();
});
});
Unit test result with 100% coverage:
PASS src/stackoverflow/57290601/index.spec.tsx
test
✓ t1 (54ms)
-----------|----------|----------|----------|----------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
-----------|----------|----------|----------|----------|-------------------|
All files | 100 | 100 | 100 | 100 | |
index.tsx | 100 | 100 | 100 | 100 | |
-----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 1 passed, 1 total
Time: 3.089s, estimated 5s
snapshot:
// Jest Snapshot v1
exports[`test t1 1`] = `"<div>1</div>"`;
Here is the completed demo: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/57290601