Fix wrong name printed in custom elements (when passed as props)

[guigrpa]

When printing a custom element passed as a prop to another one with the ReactElement plugin, the name of the former is not printed correctly:

      const Cat = () => React.createElement('div');
      assertPrintedJSX(
        React.createElement('Mouse', {
          prop: React.createElement(Cat, {foo: 'bar'})
        }),
        '<Mouse\n  prop={\n    <Cat\n      foo="bar" />\n  } />'
      );

The above test fails, since the following is generated:

<Mouse\n  prop={\n    <() => React.createElement('div')\n      foo=\"bar\" />\n  } />

This issue is related to jestjs/jest#2037.

[cpojer]

It seems like the test is actually failing on travis. Why is the element thought to be "unknown"?

[guigrpa]

The test passes on Node v6, but fails on Node v4/v5. I investigated a bit further and found that it's due to Node 6's inferred function names. Compare:

// Node v6
> foo = function() {}
[Function: foo]
> foo.name
'foo'
>

// Node v4
> foo = function() {}
[Function]
> foo.name
''
> function foo() {}
undefined
> foo.name
'foo' 

I guess that the proposed change is in any case an improvement: it fixes the problem in v6, and it provides better behaviour in v4/v5: Unknown is in any case better than the previous function dump. Maybe this test should just be skipped in previous versions of Node? (also note that v6 has recently become the current LTS branch).

[cpojer]

Ah I see, Node 6 isn't currently part of travis. Would you mind updating that? (remove node 5 and add node 6). I recommend changing the functional component to function Cat() { return …; } so it'll work both on node 4 and node 6.

[cpojer]

you'll need to write this as

function Cat() {
  return React.createElement('div');
};

[guigrpa]

I was just writing that return, you're too fast! :)

[khankuan]

Hmm, @thejameskyle seems like the following would result in Unknown in jest --coverage option but works fine in regular test.

const Parent = () => {
  return <MyComponent />
}

const MyComponent = () => {
  ...
}

export default Parent;

The problem seems to be multiple components definition in a single file. It feels more like an Istanbul / Jest issue. Any ideas?

[guigrpa]

I managed to reproduce it even with a single component in a file:

// ex.js
import React from 'react';
const A = () => React.createElement('span');
export default A;

// __tests__/ex.test.js
import A from '../ex';
describe('A', () => {
  it('renders correctly', () => {
    console.log(`A's name: '${A.name}'`);
  });
});

Running with --coverage gets you Unknown, without the flag A. Seems an Istanbul issue, and is indeed reported here: gotwarlost/istanbul#699.