Create-react-app: Functional components lose displayName when running coverage

[alphashuro]

Description

Coverage fails to run tests correctly, resulting in failed tests that are actually passing when run without --coverage.

Expected behavior

Passing tests should still pass when i add --coverage

Actual behavior

Tests that are passing without --coverage are failing when i add --coverage.

Environment

Run these commands in the project folder and fill in their results:

1. npm ls react-scripts (if you haven’t ejected): UNMET PEER DEPENDENCY [email protected]
2. node -v: v6.9.1
3. npm -v: 3.10.9

Then, specify:

1. Operating system: OSX Sierra 10.12
2. Browser and version: Safari 10.0

[alphashuro]

any progress on this?

[gaearon]

Hey, sorry for the long response!

It's npm test -- --coverage, not npm test --coverage.
Is this what you were typing?

[alphashuro]

i was indeed running it correctly, and it was generating coverage reports, just not actually passing some tests. but i figured out what the problem was, when i ran tests with --coverage my functional components' displayName property wasn't set, so when i rendered them with shallow and tried to do wrapper.find(...) it was failing to find the functional child nodes, even though it was finding them successfully when running the tests without --coverage. i had to go through all my functional components adding the displayName property. Components created with React.createClass were unaffected... perhaps this would be something to mention in the docs or investigate in your instrumentation tool?

[existentialism]

Probably worth tracking https://github.com/istanbuljs/babel-plugin-istanbul/issues/63

[gaearon]

Oh this is interesting, thanks for the link.
Definitely let's track it.

[wyze]

This is fixed as of [email protected]. I just did a fresh project with create-react-app and was able to use npm test -- --coverage successfully.

Note that displayName is only set when you define your component and use that variable as the default export. If you follow the 2nd example, the displayName isn't set and defaults to Component, but this still passes when checking coverage.

// Works
const Hello = () => <div>Hello</div>

export default Hello

// Doesn't work
export default () => <div>Hello</div>

[gaearon]

Awesome, thanks for reporting back.
Closing this.

I sent a PR to Jest to enforce a minimal version in the future, but for now existing users can get the fix by removing node_modules and running npm install again.