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"
>
BPMThe 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.
I'm trying to convert my tests to use
ts-jest, sincebabel-jestdoesn't do any typechecking.ts-jesthas 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
The issue is that
ts-jestwill first compileinto
And it seems like this output fails the
isStyledchecks in thedisplayNameAndIdfunction. I'm not sure if this is the reason, but there's a space added betweendivand the backtick.It's not a big deal, but it would be great to get the display name working with
ts-jestto get nicer snapshots.