Shallow Rendering a Redux Component in React Tests

foo-bar.jsx

import React, { Component } from 'react';
import { connect } from 'react-redux';

export class FooBar extends Component {

	greet() {
		return `Hello ${store.foo} ${store.bar}!`;
	}

	render() {
		return (
			<h1>{this.props.foo} {this.props.bar}</h1>
		);
	}

}

const mapStateToProps = (store) => {
	return {
		foo: 'Foo',
		bar: 'Bar'
	}
}

const mapDispatchToProps = (dispatch) => {
	return {}
}

export default connect(
	mapStateToProps,
	mapDispatchToProps
)(FooBar);

foo-bar.test.jsx

import React from 'react';
import { shallow } from 'enzyme';
import { ShallowMock } from './shallow-mock.jsx';
import { FooBar } from './foo-bar.jsx'; // The braces are important!

let store = {
	foo: 'Foo',
	bar: 'Bar'
};

describe('Component: FooBar', () => {

	it('should create the FooBar component', () => {
		const foobar = shallow(
			ShallowMock(<FooBar />, store)
		);
		expect(foobar).toBeTruthy();
	});

	it('greet method should output a message', () => {
		const foobar = shallow(
			ShallowMock(<FooBar />, store)
		);
		expect(foobar.instance().greet()).toEqual(`Hello ${store.foo} ${store.bar}!`);
	});

});

shallow-mock.jsx

import React from 'react';

export const ShallowMock = (Component, props) => {
    return React.cloneElement(
	    Component, 
	    props
    );
};

export default ShallowMock;