CODEWITHSUNDEEP
unit-testingreactjsenzyme
Umair Sarfraz
Umair Sarfraz

Reputation: 5976

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')}>
        {inputFields}
      </div>
    </form>
  );
};

Test:

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'});
      });

Upvotes: 1

Views: 3618

Answers (1)

Michael Parker
Michael Parker

Reputation: 12966

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').

wrapper.find('div').first().props('style')

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'}

Upvotes: 2

Related Questions