How to render elements inside render prop while testing with Enzyme

Question

I have a component which have this structure

return <Element>
            {(a, b): React.ReactElement => (
               ...some elements here
         )}
        </Element>;

When I'm testing it I'm getting this with debug

<Element>
   [function]
 </Element>

My question is what is usually the way to get inside this function to check the elements which it returns?

My test

import React from 'react';

import {createShallow} from '@material-ui/core/test-utils';

import Component from './Component';

let shallow;

function setup() {
    const props = {};

    const wrapper = shallow(<Component {...props} />);

    return {
        props,
        wrapper,
    };
}

beforeAll(() => {
    shallow = createShallow({ dive: true });
});

describe('Components', () => {
    describe('Element', () => {
        it('Should render self', () => {
            const {wrapper, props} = setup();

            console.log(wrapper.debug())

            expect(wrapper.exists()).toBeTruthy();
        });
    });
});

jjanczyk jjanczyk · Accepted Answer · 2020-05-21T19:55:27

There are two solutions:

Use wrapper.dive() or wrapper.shallow() that would cause your ShallowWrapper to render child of your top-level component. However, I do not recommend using shallow at all as there are many issues with it and you've just experienced one - it does not render everything.
Use mount instead of shallow and you would have your children function rendered by default.

How to render elements inside render prop while testing with Enzyme

1 Answers