styled-components/babel-plugin-styled-components

Loses display name with ts-jest

brandonchinn178 opened this issue · 5 comments

brandonchinn178 commented

I'm trying to convert my tests to use ts-jest, since babel-jest doesn't do any typechecking. ts-jest has a mode that will use babel configuration, which will typecheck the code, compile the typescript into javascript, then pass the javascript to babel to finish transpiling.

It works for the most part, except my snapshots lose the nice display name

      <div
-       class="SongForm__FormField-sc-1n6uj49-1 jkpiQR"
+       class="sc-htpNat fUJRVs"
      >
        <label
          for="bpm"
        >
          BPM

The issue is that ts-jest will first compile

const FormField = styled.div`
  ...
`

into

const FormField = styled_components_1.default.div `
  ...
`

And it seems like this output fails the isStyled checks in the displayNameAndId function. I'm not sure if this is the reason, but there's a space added between div and the backtick.

It's not a big deal, but it would be great to get the display name working with ts-jest to get nicer snapshots.

Dartv commented

@brandonchinn178 I have the same issue. Have you figured it out?

kolesker commented

@brandonchinn178 It's been a while I have the same issue and I was not able to migrate from Jest 26 to 29 because I face this issue. Have you sorted it out?

I have steps to reproduce here kulshekhar/ts-jest#4026

  • 👎1