Today, I began the process of migrating our web components to lit-html. However, when attempting to run the initial test, an error message was encountered:
SyntaxError: Cannot use import statement outside a module
> 1 | import {LitElement, html, css, svg} from "lit";
| ^
2 | import {property} from 'lit/decorators.js';
3 |
The error message points to lit\index.js.
After researching online, it was discovered that configuring jest is necessary to precompile lit using babel. Despite various attempted solutions, none have proven successful so far.
I converted my .babelrc file to a babel.config.js with the following configuration:
module.exports = {
"presets": [
[
"@babel/preset-env"
]
],
"plugins": [
["transform-react-jsx", {"pragma": "h"}],
"inline-svg"
]
}
(the transform-react-js option is necessary due to having wrapper components)
The jest.config.js file includes the following options:
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',
],
.
. [remaining content unchanged]
.
Multiple attempts were made to adjust the transformIgnorePatterns setting, including passing each lit package separately in an array, but all efforts have been unsuccessful. Is there a crucial option that has been overlooked?