Umair Umair - 1 year ago 231
React JSX Question

Enzyme: Stateless Functional Component returns undefined props

I have a SFC that I am testing using Enzyme shallow rendering. I am passing a style object with inline styles as props to this stateless component. However when I apply unit test to it, it returns undefined. I am not sure if that is okay as I understand that this component is just returning whatever is passed to it as props and as nothing is passed/rendered it is giving me undefined. Is there any workaround for this?

const LoginForm = ({ style, handleSubmit }) => {
return (
<form onSubmit={handleSubmit}>
<div style={_.get(style, 'container')}>


it('should apply styles to first div', () => {
const wrapper = shallow(<LoginForm style={{display: 'inline'}}/>);
expect(wrapper.find('div').first().prop('style')).to.eql({display: 'inline'});

Answer Source

There's a couple of reasons for why this would fail.

First, it looks like you're using the Enzyme shallow wrapper API incorrectly.

If you want to get a specific prop from a shallow wrapper, you need to use .props() (in other words, you forgot the 's').


However, even with this correction, your test will still fail, because in your test, you're passing {display: 'inline'} as the style prop, but you're looking for a property called container in your implementation. I assume you're using lodash.get, which gets the value at the path of an object. Since the object you're supplying doesn't have a container property, the div's style prop will be equal to {style: undefined}, and the test will fail when trying to compare this to {display: 'inline'}

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download