jest --coverage causes display name to change

[IanEdington]

I get different display names for this component depending on if I run jest with --coverage or not.

const IconCircle = styled(Circle)`
  justify-content: center;

with yarn jest --env=jsdom I get ReportIssueModal__IconCircle
with yarn jest --env=jsdom --coverage I get Styled(Circle)

[IanEdington]

I found a temporary solution by setting the displayName manually.

IconCircle.displayName = 'IconCircle';

[quantizor]

Hmm. So this happens because of the instrumentation babel is adding, which changes the line order of the files and then consequently the component hashes. Do you have SSR mode on for the plugin? That might help.

…

On Wed, Aug 15, 2018 at 9:50 AM Ian Edington ***@***.***> wrote: I found a temporary solution by setting the displayName manually. IconCircle.displayName = 'IconCircle'; — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#151 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAiy1lsaLEJDGRyebSl90QEBLoZPlcBQks5uRDUogaJpZM4V8in7> .

[IanEdington]

Interesting. Thanks for explaining that. enabling SSR mode on the styled-components babel plugin doesn't seem to have an effect. This is what I'm using:

  "env": {
    "test": {
      "plugins": [
        ["babel-plugin-styled-components", {
          "ssr": true
        }],

with coverage still fails

[quantizor]

Okay, one other idea: for babel environment “test” (what jest uses) set the plugin option displayName: false. I think this might help counteract what Istanbul (the instrumentor) is doing.

[quantizor]

@IanEdington Did you by chance have time to test the above? Your babelrc would look something like this:

{
  "plugins": ["styled-components"],
  "env": {
    "test": {
        "plugins": [["styled-components", { "displayName": false }]]
     }
  }
}

[IanEdington]

Thanks for following up

Yes I did. Instead of ReportIssueModal_IconCircle I get styled.div which is unfortunately not very useful for a snapshot test. It does remove the conflict between the two environments though.

[quantizor]

I mean I wouldn’t really rely on snapshot tests for this sort of thing anyway to be honest. The way the components are named are not part of the public API, so they could change at any time.

[ljharb]

To be clear, the way components are named is absolutely a part of the public API - the API is everything observable - so changing them must follow semver just like anything else.