set up jest testing for lit with typescript, microbundle

Question

I started today to migrate our web components to lit-html but when i tried to run the first test i get the following error message

SyntaxError: Cannot use import statement outside a module

> 1 | import {LitElement, html, css, svg} from "lit";
    | ^
  2 | import {property} from 'lit/decorators.js';
  3 |

with a pointer to lit\index.js

from searching the web i learned that i need to configure jest so lit will get precompiled by babel but so far no solution i found worked for me.

i made my .babelrc to a babel.config.js with following config:

module.exports = {
    "presets": [
        [
            "@babel/preset-env"
        ]
    ],
    "plugins": [
        ["transform-react-jsx", {"pragma": "h"}],
        "inline-svg"
    ]
}

(the transform-react-js option is needed since we have a few wrapper components )

jest.config.js has following options set:

module.exports = {
    preset: 'ts-jest',
    testEnvironment: 'jest-environment-jsdom',
    roots: [
        '<rootDir>/src',
    ],
    collectCoverageFrom: [
        '<rootDir>/src/**/*.tsx',
        '<rootDir>/src/**/*.ts',
        '!<rootDir>/src/test/**',
        '!<rootDir>/src/**/*.d.ts',
    ],
    coverageReporters: [
        'text-summary',
        'html',
        'lcov',
        'clover',
    ],
    coverageDirectory: './coverage/',
    collectCoverage: true,
    moduleDirectories: [
        'src',
        'node_modules',
    ],
    moduleFileExtensions: [
        'js',
        'ts',
        'tsx',
    ],
    moduleNameMapper: {
        '\\.(css)$': '<rootDir>/src/test/stubs/css.js',
    },
    snapshotSerializers: [
        'enzyme-to-json/serializer',
    ],
    snapshotResolver: '<rootDir>/src/test/snapshot-resolver.js',
    globals: {
        'ts-jest': {
            tsconfig: {
                allowJs: true,
            },
        },
    },
    setupFilesAfterEnv: [
        '<rootDir>/src/test/jest-setup.js',
    ],
    transform: {"^.+\\.(js|ts)x?$": 'ts-jest'},
    transformIgnorePatterns: ['node_modules/(?!(lit-element|lit-html|lit|@lit)/)'],
};

i tried a few other options for transformIgnorePatterns including passing every lit package seperately in an array with no success did i miss an important option?

Not sure how helpful this will be to your project setup, but decent support for es6 modules is one of the reasons I started using vitest instead of jest. — a2k42, Oct 10 '22 at 14:30
Jest has "experimental" support for ES modules https://jestjs.io/docs/ecmascript-modules but somehow it becomes even more of a pain to use it along with ts-jest. I tried it a while back and ended up giving up. — Augustine Kim, Oct 12 '22 at 17:14
worst thing: for me it breaks randomly at times. but i'm stuck with it on the project :) — s.Bergmann, Oct 13 '22 at 07:11

score 1 · Answer 1 · answered Oct 13 '22 at 07:10

whelp. turned out i had to adjust the transformignorePatterns to:

transformIgnorePatterns: ['node_modules/(?!lit-element|lit-html|lit|@lit/)'] (no parenthesis around the lit packages)

found the answer here, where OP could only make it work with

(?!${['lit-element', 'lit-html', 'lit', '@lit'].join('|')})

set up jest testing for lit with typescript, microbundle

1 Answers1