displayName is prefixed with filename

[jony89]

Why does the displayName of component includes the blockName/filename ?

This makes it impossible to test the components using enzyme, when I try to .find("ComponentName") it fails because the component displayName is filename__ComponentName

Here is the relevant code :

https://github.com/styled-components/babel-plugin-styled-components/blob/master/src/visitors/displayNameAndId.js#L34-L46

(Edited by @kitten to show link to source instead of transpiled code sample)

[jony89]

fixed by adding "fileName": false to the plugin.

Yet, I could not find any docs regard this, in addition I think that "fileName": false should be the default.

["babel-plugin-styled-components", { "fileName": false }],

[kitten]

@jony89 This is entirely on purpose. The intention is to make the name of the component import-order-independent and to give it a name that is as unique as possible.

The reason for that is that it's quite common to give single-use StyledComponents similar names across files, e.g. Item in components/List.js or Image in components/Avatar.js.

So this way the name will end up being more identifiable.

But maybe it'd indeed be great if we could document the fileName option? https://github.com/styled-components/babel-plugin-styled-components/blob/master/src/utils/options.js#L7

cc @probablyup

[jony89]

Yeah, docs will be gr8, make sure to write something about testing with enzyme.

So this way the name will end up being more identifiable

identifiable at what point?

for errors - we have stack trace for testing (with enzyme) - we must use "fileName": false

[kitten]

@jony89 I don’t understand why you must set it to false, but it’s mainly for inspecting elements while nothing is going wrong per se, in the sense of errors.

PRs to the website repo for docs are very welcome :)

[jony89]

"I don’t understand why you must set it to false"

I mus set it to false in order to test the components using enzyme, when I try to .find("ComponentName") it fails because the component displayName is filename__ComponentName

I would love to cr8 a PR as long u agree with me.

[kitten]

@jony89 You can just use .find(Component) directly which should always work :)

Reference: https://github.com/airbnb/enzyme/blob/master/docs/api/selector.md#3-a-react-component-constructor

I would love to cr8 a PR as long u agree with me.

Well, I can see why some would like to set it to false. In your case I'm not sure whether that's justified. Either way, I don't see why this should not be documented. :+1:

[quantizor]

@jony89 you can set displayName: false in the babel plugin option if you don't want noise.

[jony89]

@probablyup that will remove the displayName, which is needed.

[quantizor]

Not if you use the syntax Phil suggested. On Wed, May 9, 2018 at 2:15 AM jony89 notifications@github.com wrote:

@probablyup https://github.com/probablyup that will remove the displayName, which is needed.

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/styled-components/babel-plugin-styled-components/issues/130#issuecomment-387631645, or mute the thread https://github.com/notifications/unsubscribe-auth/AAiy1pXHgRluLqVBsIMJmbuKHSQYVGyzks5twollgaJpZM4SWUYr .

[jony89]

Yeah sure, but that won't work for dynamic component names. also you don't want that styled-components will force a way to test react components, styled-component should be agnostic to that..

[jony89]

@probablyup I hope someone will approve the PR, it's all written there :

https://github.com/styled-components/styled-components-website/pull/240/files