displayName option doesn't work babel-plugin-styled-components plugin
See original GitHub issueI’m using nextjs with jest, enzyme, and styled-component I have this in .babelrc
{
"env": {
"development": {
"presets": ["next/babel"],
"plugins": [["babel-plugin-styled-components", { "ssr": true }]],
},
"production": {
"presets": ["next/babel"],
"plugins": [["babel-plugin-styled-components", { "ssr": true }]],
},
"test": {
"presets": ["env", "react"],
"plugins": [["babel-plugin-styled-components", { "displayName": true }]]
}
}
}
this is my index.js
const Container = styled.h1`
font-size: 14px;
`
Container.displayName = 'Container'
export default () => (<div>
<Container>Hello</Container>
</div>)
and index.spec.js
import React from 'react'
import { shallow } from 'enzyme'
import IndexPage from './index'
describe('Pages', () => {
describe('Index page', () => {
it('should render without error', function () {
const wrap = shallow(<IndexPage/>)
expect(wrap.find('Container').text()).toBe('Hello')
})
})
})
the test will fail if I commnet out this line
Container.displayName = 'Container'
Issue Analytics
- State:
- Created 5 years ago
- Comments:10 (4 by maintainers)
Top Results From Across the Web
babel-plugin-styled-components not working - Stack Overflow
I've been trying to get the babel-plugin-styled-components plugin to work with my webpack/babelrc configuration but I have not been able to ...
Read more >gatsby-plugin-styled-components - npm
Gatsby plugin to add support for styled components. Latest version: 6.3.0, ... For example, to disable the displayName option:.
Read more >Tooling - styled-components
Our Babel plugin will transpile template literals attached to styled components to a slightly different, smaller form which still works in older browsers...
Read more >gatsby-plugin-styled-components | Yarn - Package Manager
Install. npm install gatsby-plugin-styled-components styled-components babel-plugin-styled-components · How to use. Edit gatsby-config.js · Options. You can pass ...
Read more >Server-side rendered styled-components with Nextjs
I've recently worked on setting up Next.js with styled-components, ... to customize the .babelrc and use babel-plugin-styled-components.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Within the snapshot files, it’ll instead of using the
displayName
as the component name, it will render asForwardRef
.It looks like the
displayName
is either ignored by enzyme or not set properly by styled-components.The issue started with the v4 release, this is all working fine with styled-components v3 (before the move to
forwardRef
basically.)Any ideas how we can moved forward with this?
OMG! this is the actual answer to the problem I was having : https://styled-components.com/docs/tooling#babel-macro
I think that babel-plugin-styled-components issue is about something else. I think the issue I am looking at is actually a documentation issue with create-react-app. (The issue is that no one reads the documentation 😁 they need the build tool to throw warnings telling them what to do: https://github.com/facebook/create-react-app/issues/3858#issuecomment-578267687)