Jest.js 用 typescript 、微束设置信函玩笑测试

s6fujrry  于 2022-12-08  发布在  Jest
关注(0)|答案(1)|浏览(132)

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

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,所以lit将得到由babel预编译,但到目前为止,我没有找到适合我的解决方案。
我把我的.babelrc变成了一个babel.config.js,配置如下:

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

(the transform-react-js选项,因为我们有一些 Package 器组件)
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,包括通过每一个点燃包分别在一个阵列没有成功,我错过了一个重要的选项吗?

ovfsdjhp

ovfsdjhp1#

结果我不得不将transformignorePatterns调整为:
transformIgnorePatterns: ['node_modules/(?!lit-element|lit-html|lit|@lit/)'](点亮的 Package 周围没有括号)
在这里找到了answer,OP只能让它与
(?!${['lit-element', 'lit-html', 'lit', '@lit'].join('|')})

相关问题