从LitElement文件运行Jest测试时出错(模块导入)

时间:2019-07-31 15:06:55

标签: typescript jestjs babel-jest lit-element

当我尝试运行笑话测试时,自行编写的打字稿文件工作正常。但是LitElement文件不会(Transpile)多数民众赞成在我的猜测。

我已经清除了缓存, 我已经创建了babel.config.js文件 并尝试将模块添加到transformIgnorePatterns。

测试中的玩笑错误:

import { TemplateResult } from 'lit-html';
           ^

    SyntaxError: Unexpected token {

    > 1 | import { css, *CSSResult*, customElement, html, *LitElement* } from 'lit-element';

Jest.config.js文件:

module.exports = {
    // Automatically clear mock calls and instances between every test
    clearMocks: true,

    // Indicates whether the coverage information should be collected while executing the test
    collectCoverage: true,

    // An array of glob patterns indicating a set of files for which coverage information should be collected
    // collectCoverageFrom: null,
    collectCoverageFrom: [
        '**/*.{js,jsx}',
        '!**/node_modules/**',
        '!**/vendor/**',
        '!**/bin/**'
    ],

    // An array of regexp pattern strings used to skip coverage collection
    coveragePathIgnorePatterns: ['/node_modules/', '/bin/'],

    // An object that configures minimum threshold enforcement for coverage results
    // coverageThreshold: null,
    coverageThreshold: {
        global: {
            branches: 80,
            functions: 80,
            lines: 80,
            statements: -10
        }
    },

    // An array of file extensions your modules use
    moduleFileExtensions: ['js', 'ts', 'node'],

    roots: ['<rootDir>/src'],

    // The test environment that will be used for testing
    testEnvironment: 'node',

    // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
    testPathIgnorePatterns: ['/node_modules/', '/bin/'],

    // A map from regular expressions to paths to transformers
    transform: {
        '^.+\\.tsx?$': 'ts-jest',
        '^.+\\.jsx?$': 'babel-jest',
        '.+\\.(css|styl|less|sass|scss)$':
            '<rootDir>/node_modules/jest-css-modules-transform'
    },

    // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
    transformIgnorePatterns: [
        '/node_modules/',
        '/node_modules/(?!CCSResult).+\\.js$',
        '/node_modules/(?!html).+\\.js$',
        '/node_modules/(?!css).+\\.js$',
        '/node_modules/(?!lit-element).+\\.js$',
        '/node_modules/(?!lit-html).+\\.js',
        '/node_modules/(?!lit-boilerplate).+\\.js'
    ],

    modulePaths: ['<rootDir>']
};

Hello.ts文件

import { css, CSSResult, customElement, html, LitElement } from 'lit-element';
import { TemplateResult } from 'lit-html';

/**
 * App root component
 */
@customElement('example-hello')
export class Hello extends LitElement {
    static get styles(): CSSResult {
        return css`
            button {
                background-color: palevioletred;
                padding: 5px 8px;
                color: white;
                font-size: 16px;
            }
        `;
    }

    /**
     * Render function
     */
    public render = (): TemplateResult => html`
        <button>Hello</button>
    `;

    demo: number = sum(20, 10);
}

export function sum(first: number, second: number): number {
    return first + second;
}

declare global {
    interface HTMLElementTagNameMap {
        'example-hello': Hello;
    }
}

Babel配置文件:

// babel.config.js
// babel.config.js
module.exports = {
    presets: [
        [
            '@babel/preset-env',
            {
                targets: {
                    node: 'current'
                }
            },
            '@babel/preset-typescript'
        ]
    ],
    plugins: [
        ['@babel/plugin-syntax-typescript', { isTSX: true }],
        ['@babel/plugin-syntax-dynamic-import'],
        ['@babel/plugin-proposal-decorators', { legacy: true }],
        ['@babel/plugin-proposal-class-properties', { loose: true }]
    ]
};


tsconfig.json:

{
    "compilerOptions": {
        /* Basic Options */
        "target": "es2018",                       /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
        "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
        "lib": ["dom", "es2018"],                 /* Specify library files to be included in the compilation. */
        "declaration": true,                      /* Generates corresponding '.d.ts' file. */
        "sourceMap": true,                        /* Generates corresponding '.map' file. */
        "outDir": "./dist",                       /* Redirect output structure to the directory. */
        "rootDir": "./src",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
        "noResolve": false,                       /* Do not add triple-slash references or module import targets to the list of compiled files. */
        "skipLibCheck": true,                     /* Skip type checking of all declaration files (*.d.ts). */

        /* Strict Type-Checking Options */
        "strict": true,                           /* Enable all strict type-checking options below. */

        /* Additional Checks */
        "noUnusedLocals": true,                   /* Report errors on unused locals. */
        "noUnusedParameters": true,               /* Report errors on unused parameters. */
        "noImplicitReturns": true,                /* Report error when not all code paths in function return a value. */

        /* Module Resolution Options */
        "moduleResolution": "node",               /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
        "baseUrl": "./",                          /* Base directory to resolve non-absolute module names. */
        "allowSyntheticDefaultImports": true,     /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
        "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */

        /* Experimental Options */
        "experimentalDecorators": true            /* Enables experimental support for ES7 decorators. */
    },
    "exclude": [
        "node_modules",
        "!node_modules/@types",
        "package.json",
        "postcss.config.js",
        "src/assets",
        "dist",
        "webpack.config.js"
    ],
    "include": [
        "src"
    ]
}

我希望运行Jest并通过测试。 (没有导入的打字稿文件可以正常工作并返回传递。)

0 个答案:

没有答案