用打字本、微束为lit设置玩笑测试

Question

我今天开始将我们的web组件迁移到lit，但是当我尝试运行第一个测试时，我得到了以下错误消息：

SyntaxError: Cannot use import statement outside a module

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

带有指向lit\index.js的指针

通过搜索网页，我了解到我需要配置jest，所以babel会预编译lit，但到目前为止，我还没有找到适合我的解决方案。

我使用以下配置将我的.babelrc设置为babel.config.js：

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

(由于我们有一些包装组件，所以需要使用transform-react js选项)

jest.config.js有以下选项集：

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)/)'],
};

我为transformIgnorePatterns尝试了其他几种选择，包括将每个点燃的包单独传递到数组中，但没有成功，我错过了一个重要的选项吗？

Answer 1

小宝贝。结果，我不得不将transformignorePatterns调整为：

transformIgnorePatterns: ['node_modules/(?!lit-element|lit-html|lit|@lit/)'] (在点燃的包裹周围没有括号)

在这里找到了answer，在这里OP只能使它与

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