find(MyStatelessFunctionalComponent) fails when running on minified react-dom

[johnjesse]

I reviewed Query Selector fails common issues and I don't think this is covered there.

If I make a stateless functional component e.g.
const MyStatelessFunctionalComponent = (props) => <input {...props}/>;

I can then mount it with enzyme and query to find it within my wrapper e.g.

let wrapper = mount(
    <div>
        <MyStatelessFunctionalComponent/>
    </div>
);

And then query my wrapper to grab that component
wrapper.find(MyStatelessFunctionalComponent)

This all works fine when I'm not using a minified version of react-dom. But, as soon as I use a minifed version of react-dom it fails -> i.e. the find retrieves no nodes 😱

I think the problem is this pieve of code from Utils.js

export function isFunctionalComponent(inst) {
    return !!inst && !!inst.constructor && typeof inst.constructor === 'function' &&
    functionName(inst.constructor) === 'StatelessComponent';
}

in particular functionName(inst.constructor) === 'StatelessComponent';

This seems extremely highly coupled to react-dom, and in particular the fact that they have a function called StatelessComponent. Thus as soon as you run against a minified version it fails.

I would argue that being so highly coupled to the internal implementation of react-dom is undesirable and leads to unnecessary fragility.

[ljharb]

The minified version of react-dom is for production; enzyme is for testing; testing is not done in production.

Certainly it's undesirable, but this level of coupling is unavoidable when React does not expose the things we need to make enzyme work ¯\_(ツ)_/¯

I'm assuming this is failing because the minified react-dom is mangling function names; at that point there's likely nothing in that particular function that can identify it such that we can determine if it's a functional component. I'll leave this open in case we can find a way, but the real solution is to use the unminified version of react and react-dom when running tests.

[johnjesse]

As for testing not being done in production, not sure I agree. IMO testing should be done on dev builds and production builds, otherwise how can you be sure your production build isn't fudged, and I'd generally argue you want to run all tests against the thing you actually ship. Tests shouldn't be tied to the codebase being unminified.

Anyway, you're right, it fails because the function name is mangled in the minification, and I think it's a difficult issue; I don't know how you'd tests for something being a stateless component other in the way you've done it above, I'll keep thinking

[ljharb]

Thanks - if we can fix this so it works with the minified build, that'd obviously be an improvement :-)

[aweary]

I don't think we need isFunctionalComponent, the adapters for all versions of React that support functional components already determine if an instance is a functional component or not. We should just try to reuse that information instead.

[ljharb]

Yes but isFunctionalComponent is the way that's determined in many of the versions; this problem will still exist in v3 - it will just be moved from core to a couple adapters.

[aweary]

isFunctionalComponent isn't used in any of the adpaters for version that support functional components. The 0.14 adapter just checks for render on the prototype, 15.x uses the _compositeType property, and in 16 the fiber has a tag which tells us the type of the component.

[ljharb]

Ah, fair enough - sounds like this is resolved by #1007 then (people still shouldn't be mangling function names ever, tho)

[aweary]

I think we need to make a small change to use the nodeType property on the node returned from getNode, I can submit a PR for it! 👌