Skip to content

Instantly share code, notes, and snippets.

@benmvp
Created November 16, 2017 05:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save benmvp/190f7dc7c4789f35928da2df7f9d4019 to your computer and use it in GitHub Desktop.
Save benmvp/190f7dc7c4789f35928da2df7f9d4019 to your computer and use it in GitHub Desktop.
How can I use enzyme shallow rendering to assert props being passed to TextInput/Label and not helper TopSection/BottomSection?
import React from 'react';
import TextInput from './TextInput';
import Label from './Label';
const TopSection = ({fields: {firstName, lastName}}) => (
<fieldset>
<div>
<Label>First Name</Label>
<TextInput name="firstName" value={firstName} />
</div>
<div>
<Label>Last Name</Label>
<TextInput name="lastName" value={lastName} />
</div>
</fieldset>
);
const TopSection = ({fields: {address, city, state, zip}}) => (
<fieldset>
<div>
<Label>Street Address</Label>
<TextInput name="address" value={address} />
</div>
<div>
<Label>City</Label>
<TextInput name="city" value={city} />
</div>
<div>
<Label>State</Label>
<TextInput name="state" state={state} />
</div>
<div>
<Label>Zip</Label>
<TextInput name="zip" zip={zip} />
</div>
</fieldset>
);
export default class DummyAddressForm extends React.Component {
render() {
let {fields} = this.props;
return (
<TopSection fields={fields} />
<BottomSection fields={fields} />
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment