Feature request: wrap JSX without any rendering #1444
Description
Sometimes I find that I need to run assertions on raw ReactElements, without needing to shallow render or mount. This is especially common with the hip new "render prop" pattern. Here's an example based on React Router:
// Using Route's render prop to inject the `match`, as seen in this example:
// https://reacttraining.com/react-router/web/example/custom-link
const MyCustomLink = (children, to) => (
<Route
render={({ match }) => (
<ObnoxiousHighlight on={Boolean(match)}>
<Link to={to}>{children}</Link>
</ObnoxiousHighlight>
)}
/>
);
describe('MyCustomLink', () => {
it('renders', () => {
const outerWrapper = shallow(<MyCustomLink to="/home">Home</MyCustomLink>);
const route = outerWrapper.find(Route);
const innerJsx = route.prop('render')({ match: { __testMatch: true } });
const innerWrapper = __someNewEnzymeFunction(innerJsx);
expect(innerWrapper.find(ObnoxiousHighlight)).toHaveProp('on', true);
expect(innerWrapper.find(Link)).toHaveProp('to', '/home');
});
});Note that if I called shallow(innerJsx), it would be treated as a shallow render of ObnoxiousHighlight, which isn't what I'm interested in testing in this suite.
As a workaround, I've been using this dirty function:
const wrap = element => shallow(<div>{element}</div>).childAt(0);But it would be nice to have it as part of Enzyme.