Eslint-plugin-react: Option to enable `display-name` only for stateless arrow function components

[dallonf]

I've just run into this issue in Jest and/or Istanbul:
https://github.com/facebook/jest/issues/1824#issuecomment-250478026

Where the name of arrow functions, while it can be inferred normally, is lost during coverage. I would like ESLint to flag when this is likely to happen, as it can be very difficult to figure out what's going on when tests only fail in the slowest execution mode!

Obviously this is not everyone's use case, so this probably makes the most sense as an option on display-name.

[ljharb]

Try disabling the ignoreTranspilerName option.

[dallonf]

Thanks for the response! If I understand correctly, even with the ignoreTranspilerName option, it would still flag class components as needing a displayName, which would be prohibitively noisy for our situation; classes behave as expected even when doing code coverage and there's no need to assign a displayName to them.

Even stateless components defined with the function keyword seem to work as expected! It's specifically the arrow function components without a displayName I'd like to flag.

It's likely I would have time to submit a PR for this feature, but I'd like some input on what the best option (name and behavior) would be.

[ljharb]

It shouldn't; class Foo extends React.Component {} has a legitimate, non-transpiler name of Foo. ignoreTranspilerName should only be bypassing name inference; which applies to anonymous and arrow functions in particular.

[dallonf]

Let me try that - that's definitely contrary to how the docs suggest it works: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/display-name.md

In particular, it shows a class component under the "will cause warnings" section and a class component with an explicit displayName under "okay and do not cause warnings".

[ljharb]

ah, maybe I'm misunderstanding it - in which case https://github.com/yannickcr/eslint-plugin-react/issues/1297#issuecomment-314932009 makes sense to me.

However, this is the reason the airbnb style guide forbids arrow function SFCs - because relying on name inference is brittle.

I'm not sure what option name would make sense here. Thoughts?

[DominicTobias-b1]

Is it possible to only enforce it on the components themselves rather than arrow functions on objects inside the component?

e.g. not on these format arrow functions?