Loses display name with ts-jest

[brandonchinn178]

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]

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

[Dartv]

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

[brandonchinn178]

Nope

[kolesker]

@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

[EvgeniyT13]

I have this issue too(

[quantizor]

Thanks @brandonchinn178. You diagnosed this exactly right: the ts-jest compile shape (styled_components_1.default.div template) was failing isStyled because the helper name __importDefault wasn't on the recognized list (we matched Babel's _interopRequireDefault only).

Fixed in #421, shipped in 2.3.0. Closing in favor of that work.