Enzyme: React nodes passed as props should still be shallow components

[sattaman]

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().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]

It would be a very bad idea to silently enzyme-wrap prop values - however, i could see some kind of API like wrapper.wrapProp('sidePanel').

[keyboard-clacker]

@ljharb Is there any good way to interact/assert on components passed as props? I'm also unable to do something like:

// JSX structure
function Component = () => (
  <Modal
    footer={
      <>
        <Button>Cancel</Button>
        <Button>Link</Button>
      </>
    }
  />
)

// enzyme code
const wrapper = shallow(<Component />)
const footer = shallow(wrapper.find(Modal).prop('footer'))
const buttons = footer.find(Button)

which is surprising to me. Beyond doing something like this, I haven't been able to find a good way to interact with these props. Let's say I wanted to find the Link button and assert it's not disabled, this is the only way I've found to be able to do this:

const wrapper = shallow(<Component />)
const buttons = wrapper.find(Modal).prop('footer').props.children
const linkButton = buttons.find(el => el.props === 'Link')

expect(linkButton.props.disabled).toBe(null)

This test isn't perfect definitely, but hopefully, my point is clear!

[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);

[keyboard-clacker]

Oh interesting, not too bad! Out of curiosity, do you know why doing shallow(wrapper.find(Modal).prop('footer')) doesn't work? From this example, it seems like it should, but it does not

[ljharb]

Because shallow doesn’t take a fragment directly, i believe.

[keyboard-clacker]

Ahh I see, that's a bummer. Thanks for the help!

[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]);