React nodes passed as props should still be shallow components

When passing a React Node as a prop, I want to be able to test the node.

ie

<MyComponent
      sidePanel={<SidePanel><Child onClick={() => testThis()}/></SidePanel>}
 />

Here I want to be able to test testThis is called.

Describe the solution you’d like

shallow(<Component>).props().sidePanel should still be a shallow component and have the normal api available.

ie this should work.

shallow(<Component>).props().sidePanel.find(Child).props().onClick();

[ljharb]

@keyboard-clacker not at the moment, but you could do:

const wrapper = shallow(<Component />);
const Footer = () => wrapper.find(Modal).prop('footer');
const footer = shallow(<Footer />);
expect(footer.prop('disabled').toBe(null);

[aarowman]

+1 to something like this. The suggestion from @ljharb above is great: something like wrapper.wrapProp('sidePanel'). I agree we shouldn’t just silently change that, because it’s also useful to get the props directly.

I’m running into a similar issue where I’m testing the props (which are child components) are set correctly when passed from one component to another.

ComponentA creates a list of child elements and passes it to ComponentB (a reusable template component). We are not doing the normal children approach because there is more than one prop, and each one needs to be separately identified.

For testing, I couldn’t just use the props directly and had to do a dummy wrapper:

const wrapper = shallow(<MyComponent/>);
const links = wrapper.props().links;

// need to use a new wrapper... and add an extra dummy div here so enzyme doesn't expand it, 
//   then use .find() to get the element itself
const smallerWrapper = shallow(<div>{links[0]}</div>);
const link1forTesting = smallerWrapper.find(Link);

// ... do testing on link1forTesting with enzyme functions

I’d love a way not to need the extra call to shallow and find and get the specific element from a new wrapper on a dummy element so I can test its properties.

I’d also be happy with a way to do a super shallow wrapper that goes 0 levels deep. Basically just turn a normal element into something that has enzyme functions.

Then something like this would work:

const link1forTesting = shallow(links[0], 0); // 0 levels deep
// or
const link1forTesting = superShallow(links[0]);