CODEWITHSUNDEEP
reactjsjestjsenzyme
Black
Black

Reputation: 10397

Shallow test function as child components

I have added a component which is using function as a child. I had shallow enzyme tests for this component which stopped working.

How can I shallow test a component which is using function as a child?

Component

return (
  <I18n>
    {({ i18n }) => (
      <div />
    )}
  </I18n>
)

Tests which I have tried

import { shallow } from 'enzyme';

wrapper = shallow(<Component />)
  .find('I18n')
  .children();
console.log(wrapper.debug()); //outputs: [function]


wrapper = shallow(<Component />)
  .find('I18n')
  .children()();
// TypeError: (0 , _enzyme.shallow)(...).find(...).children(...) is not a function

Upvotes: 4

Views: 1436

Answers (1)

Black
Black

Reputation: 10397

The children has to be get as a property instead of calling directly children and the I18n has to be shallow rendered as well. 

const outerWrapper = shallow(< Component />);
wrapper = shallow(outerWrapper.find('I18n').prop('children')());

Upvotes: 1

Related Questions