0

I need to write a test to test if the corresponding child component is rendered or not based on a prop.

To do that, I've got a component which has a child component rendered on a certain condition. Other child components are rendered without any conditional check.

To do that, in my parent component, I am receiving a prop 'renderChild'.

If 'renderChild' is true, then render the child component.

For e.g., in my ReactJS, in the ParentComponent :

return {
    <div>
    { props.renderChild && <ChildComponent {...childProps} /> }
        <ChildComponent2 {...childProps2 } />
    </div>
}

Now, here's the test I've written :

const parentProps = {
    renderChild: true;
    name: "parent",
    message: "Hello Parent"
};

const childProps = {
  name: "child1",
  message: "Hello child1"   
};


test('childComponent should be rendered if renderChild is true', () => {
    const childComponent = shallow(<ChildComponent {...childProps} />);
    expect(childComponent).toMatchSnapshot();
});

Could you please help me achieve this?

Fredster
  • 776
  • 1
  • 6
  • 16
Sunny
  • 902
  • 3
  • 18
  • 41
  • You should be snapshoting your parent component right ? – Gabriel Bleu Mar 05 '18 at 17:07
  • yes, that I'm doing that anyhow in a seperate test method. But how, how I compare? Sorry, but am new to this framework! – Sunny Mar 05 '18 at 17:11
  • Possible duplicate of [When should you use render and shallow in Enzyme / React tests?](https://stackoverflow.com/questions/38710309/when-should-you-use-render-and-shallow-in-enzyme-react-tests) – AGE Mar 05 '18 at 18:23
  • I think your problem is in the use of `shallow`, please look at the above and let me know if it helps. I know that you are learning so I thought it would be helpful to you as well – AGE Mar 05 '18 at 18:24
  • Thanks a lot! it helped :) – Sunny Mar 06 '18 at 06:08

0 Answers0