Loses display name with ts-jest
brandonchinn178 opened this issue · 5 comments
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 I have the same issue. Have you figured it out?
Nope
@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