Loses display name with ts-jest

brandonchinn178 commented 3 years ago

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.

brandonchinn178 commented 3 years ago

Minimal repro: https://gist.github.com/brandonchinn178/60a0fb62ebb1988ddbb523c3dcf0c134

Dartv commented 2 years ago

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

brandonchinn178 commented 2 years ago

Nope

kolesker commented 8 months ago

@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 https://github.com/kulshekhar/ts-jest/issues/4026

EvgeniyT13 commented 7 months ago

I have this issue too(

styled-components / babel-plugin-styled-components

Loses display name with ts-jest #343