Enzyme: How to "find" elements inside props?

[renet]

Hello everybody, I'm having the following issue and I can't find a solution for it with enzyme:

// MyComponent.jsx
import ThirdPartyTooltip from "third-party-tooltip";

export default ({ children, message }) => (
  <ThirdPartyTooltip
    tooltipContent={
      <React.Fragment>
        <button className="close" onClick={() => { /* closes tooltip */ }}>close</button>
        {message}
      </React.Fragment>
    }
  >
    {children}
  </ThirdPartyTooltip>
);

Now what I'd like to do is shallow rendering my component and test that a click on the close button inside the prop of the 3rd party component triggers the onClick function as expected. I expect my test to look something like this:

import { shallow } from "enzyme";
import ThirdPartyTooltip from "third-party-tooltip";
import MyComponent from "./MyComponent";

describe("MyComponent", () => {
  it("should close on close button click", () => {
    const component = shallow(
      <MyComponent message="This is a hint">
        Whatever
      </MyComponent>
    );
    const tooltipContent = component
      .find(ThirdPartyTooltip)
      .shallow()
      .prop("tooltipContent");
    const closeButton = shallow(tooltipContent).find(".close");

    closeButton.simulate("click", { preventDefault: () => {} });

    expect(/* tooltip closed */).toBeTruthy();
  });
});

But shallow(message) does not work, instead I get the error message

Invariant Violation: ReactShallowRenderer render(): Shallow rendering works only with custom components, but the provided element type was symbol.

No surprise here, as it probably doesn't work that way (not reporting a bug here). But what can I do to find and simulate a click on the button that is inside the "tooltipContent" prop? I didn't find any solution in the docs. But maybe it's, because I don't know what to look for.

[ljharb]

We don't currently have a good solution for this; .renderProp works when the prop is a function that returns an element, but what you'd need is something like .shallowProp() or something.

In the meantime, you can:

const TooltipContent = () => tooltipContent;
shallow(<TooltipContent />)

[renet]

That simple. Thanks!