Danny Andrews danny-andrews

@dschinkel

You should test those two methods indirectly by testing the behavior... So I'm disagreeing with @markerikson, test through your connected component.

Are you suggesting that you should forego exporting the unconnected component entirely and only test the connected component? I think that is "over testing." This ties your tests unnecessarily to the implementation details of the component it is testing. Because the functionality of the unconnected component (if it has any, that's a whole other can of worms) is completely unrelated to where it receives its props from. Maybe you want to turn that component into a purely presentational component in the future. If you test the connected component, you'll have to change all your tests to not inject a store anymore but pass the props in directly. If you tested the unconnected component, you don't have to do anything except blow away the connected-component-specific tests (more on that below).

I do agree that you should not directly test `mapState

I had a hard time finding a solution here that helped. But this tutorial is great and worked for me.

tl;dr

output: {
  filename: '[name].[chunkhash].js'
},
plugins: [
  // Order matters. 'vendor' must come before 'runtime'
 new webpack.optimize.CommonsChunkPlugin({

	/**
	* Returns internal [[Class]] property of an object
	*
	* Ecma-262, 15.2.4.2
	* Object.prototype.toString( )
	*
	* When the toString method is called, the following steps are taken:
	* 1. Get the [[Class]] property of this object.
	* 2. Compute a string value by concatenating the three strings "[object ", Result (1), and "]".
	* 3. Return Result (2).

	// Named replacements!
	const formatString = (string, substitutions = {}) =>
	string.replace(
	/%{([^}]+)}/g,
	(match, id) => {
	return substitutions.hasOwnProperty(id) ? substitutions[id] : match
	}
	);

	formatString('%{noun} is %{adjective}', {

	const removeTrailingSlash = path => path.replace(/\/$/, '');
	const ensureTrailingSlash = path => `${removeTrailingSlash(path)}/`;

	// Universal usage (no reliance on `document`)
	const parseUrl = (href) => {
	const match = href.match(/^(https?:)\/\/(([^:/?#])(?::([0-9]+))?)([/]{0,1}[^?#])(\?[^#]\|)(#.\|)$/);
	return match && {
	protocol: match[1],
	host: match[2],
	hostname: match[3],

	// Well, shit
	const verticalModifiers = ['top', 'middle', 'bottom'];
	const horizontalModifiers = ['start', 'center', 'end'];
	const modifiers = verticalModifiers.concat(horizontalModifiers);
	const getPassthroughClassNames = () => modifiers
	.map(name => [name, props[name]])
	.filter(([, value]) => value)
	.map(([name, value]) => `${name}-${value}`)
	.map(getClass);

	const LuckyNumber = ({ children }) => children({ number: Math.random() });

	const App = () => (
	<LuckyNumber>
	{({number}) => <div>Your number is: {number}!</div>}
	</LuckyNumber>
	);

	const LuckyNumber = ({ render }) => render({ number: Math.random() });

	const App = () => (
	<LuckyNumber
	render={({number}) => <div>Your number is: {number}!</div>}
	/>
	);

	const withLuckyNumber = Component => (props) => <Component number={Math.random()} {...props} />;

	const UnconnectedApp = ({ number }) => <div>Your number is: {number}!</div>;

	const App = withLuckyNumber(UnconnectedApp);