CODEWITHSUNDEEP
reactjsunit-testingjestjsenzyme
ibragimov
ibragimov

Reputation: 121

How to test a component that renders children as props in enzyme

I'm trying to test if a given component renders as many children as it receives. For now, it renders only two components. I'm stuck as I'm new to unit testing. Here's what I tried:

Component.js:


const Component = ({ children }) => {
    return <div>{children}</div>;
};

Component.test.js:

import React from 'react';
import { shallow } from 'enzyme';
import Component from './Component';
import ChildComponent from './ChildComponent';
import ChildComponent2 from './ChildComponent';

it('show a ChildComponent component', () => {
    const wrapped = shallow(<Component children />);

    expect(wrapped.find(ChildComponent).length).toEqual(1)
});

it('show a ChildComponent2 component', () => {
    const wrapped = shallow(<Component children />);

    expect(wrapped.find(ChildComponent2).length).toEqual(1)
});

Upvotes: 1

Views: 334

Answers (1)

Dom
Dom

Reputation: 117

  1. when you use shallow rendering shallow then you will not render children so this test cannot work. Your intention is to check for the children.
  2. When you render <Component/> you want to actually pass those children
<Component>
    <ChildComponent />
    <ChildComponent2 />
</Component>

Upvotes: 1

Related Questions