Lit + Jest + Typescript + SWC Jest

[gethari]

Which package(s) are affected?

Lit Core (lit / lit-html / lit-element / reactive-element)

Description

I am trying to use @swc/jest to speed up my tests on my lit+typescript+jest setup. When using the swc/jest as the test runner the willUpdate method is not getting executed. From what I see/find the call stack is different when using ts-jest & it works fine, but on using swc/jest the callstack is missing the _callSuper().

I am attaching a simple repository that can reproduce the issue. Additionally, I've included screenshots comparing the behavior with swc and ts-jest for your reference.

swc

ts-jest

Reproduction

Please check the readme in this repository for detailed repro steps.
https://github.com/gethari/typescript-webpack-lit-html-jest-swc

Workaround

I have not found a workaround

Is this a regression?

No or unsure. This never worked, or I haven't tried before.

Affected versions

3.1.2

Browser/OS/Node environment

Browser: Chrome 103.0.5060.53
OS: Windows 11
Node version: 20.11.1
npm version: 10.2.4

[augustjk]

Are you using @property decorators? It might be that SWC isn't compiling them right. I don't know if SWC supports reading project tsconfigs but you should make sure SWC configs match those of tsconfig listed here https://lit.dev/docs/components/decorators/#decorators-typescript

[gethari]

@augustjk thanks for responding,

Are you using @property decorators?

Yes

This is my tsconfig.json , it has both the properties mentioned in the lit docs, as well my .swcrc config has decorators enabled.

I am not sure about the actual cause of the issue as I'm trying to use 3 different things together, that nobody before have seem to done ( so far from my search). Hence why raised issue for help across all 3 repo.

[augustjk]

My suspicion is that swc's decorator config is the standard decorator proposal implementation, not TypeScript's experimental decorator, which might be this https://swc.rs/docs/configuration/compilation#jsctransformlegacydecorator

[gethari]

@augustjk you are right, by making the below config changes to swcrc I was able to bypass the error & got the tests up, but it results in a new error on a test, that is testing a component that is built on Stencil

Cannot find module 'web-date-picker/dist/types/components/duet-date-picker/duet-date-picker' from 'src/components/date-picker/date-picker.component.ts

But when I make the below props to false, the date-picker tests are working

"legacyDecorator": true,
"decoratorMetadata": true,

[gethari]

I also found these, I think might be related

• Decorators failed to resolve metadata type correctly on getter/setter swc-project/swc#6833
• Emit decorator metadata swc-project/swc#6824

my swcrc config for ref

{
    "$schema": "https://json.schemastore.org/swcrc",
    "jsc": {
        "parser": {
            "syntax": "typescript",
            "dynamicImport": true,
            "decorators": true
        },
        "baseUrl": ".",
        "paths": {
            "*": ["src/*"]
        },
        "keepClassNames": true,
        "transform": {
            "legacyDecorator": true,
            "decoratorMetadata": true,
            "useDefineForClassFields": false
        },
        "target": "esnext"
    }
}

[augustjk]

I don't know about Stencil but we don't require decoratorMetadata to be true.