question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

displayName option doesn't work babel-plugin-styled-components plugin

See original GitHub issue

I’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:closed
  • Created 5 years ago
  • Comments:10 (4 by maintainers)

github_iconTop GitHub Comments

5reactions
SBoudriascommented, Apr 10, 2019

Within the snapshot files, it’ll instead of using the displayName as the component name, it will render as ForwardRef.

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?

2reactions
ForestJohnsoncommented, Jan 24, 2020

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)

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found