Jest 无法导入 TypeScript 文件

乔希

执行示例测试时,出现以下错误:

Test suite failed to run

Jest encountered an unexpected token

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

我有以下文件结构:

│
├── ...
├── src
│   └── ts
│       └── index.ts
├── test
│   └── ts
│       └── index.test.ts
├── ...

在我的jest配置中,我有以下内容:

"jest": {
  "preset": "ts-jest",
  "transform": {
    "^.+\\.tsx?$": "ts-jest"
  }
}

这是我的tsconfig.json文件:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "module": "CommonJS",
    "moduleResolution": "Node",
    "noImplicitAny": true,
    "outDir": "./build",
    "removeComments": false,
    "sourceMap": true,
    "target": "ESNext"
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "src/**/*"
  ],
  "typeRoots": [
    "node_modules/@types"
  ]
}

在 中index.ts,我导出了以下类:

import {LitElement, html, customElement, property} from 'lit-element';

@customElement('hello-world')
class HelloWorld extends LitElement {
    @property({type: String}) title: string = "default title";
    @property({type: String}) description: string = "default description";

    render() {
        return html`
        <style>
        .container {
            padding: 30px;
            text-align: center;
            background: #c8e7fd;
        }
        .container h1 {
            font-size: 50px;
        }
        </style>
        <div class="container">
        <h1>${this.title}</h1>
        <p>${this.description}</p>
        </div>
        `;
    }
}

export {
    HelloWorld
};

最后,在 中index.test.ts,我按如下方式导入文件:

import {HelloWorld} from "../../src/ts";

describe('Very first test', () => {
  it('A test', () => {
    const temp: HelloWorld = new HelloWorld();
    expect(temp).not.toBe(null);
  });
});

对这个问题有什么想法吗?

乔希

事实证明,lit-elementlit-html没有在node_modules. 作为解决方案,我有以下配置:

babel.config.json

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 2
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "decoratorsBeforeExport": true
      }
    ],
    "@babel/proposal-class-properties"
  ]
}

jest.config.js

module.exports = {
    "transform": {
        "^.+\\.(j|t)s?$": "babel-jest"
    },
    "transformIgnorePatterns": [
        "node_modules/(?!(lit-element|lit-html)/)"
    ]
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

运行测试时 Jest 无法处理 TypeScript TSX 文件

使用 TypeScript 的 Jest 测试无法识别导入别名

Jest/Typescript:导入一个文件会中断另一个文件中的导入

将Jest导入常规文件

无法使用 Parcel 在 Typescript 中导入“.html”文件

无法导入Node.js中的Typescript文件

使用Typescript时无法从单独的文件导入React JSX

不提供文件扩展名就无法导入TypeScript模块

Typescript编译器无法跳过导入的js文件

没有扩展名,Typescript无法导入文件

ts-jest由于模块的js文件中的“导入”而无法运行tsx测试文件

Typescript RequireJS 导入文件

React Jest测试无法与ts-jest一起运行-导入文件上出现意外令牌

在TypeScript中导入json文件

在 Javascript 中导入 Typescript 文件

使用 Typescript 导入 JSON 文件

在`jest.config.js`文件中导入本地文件

Jest 在 Typescript 中导入 lodash 函数时遇到意外的令牌

如何使用Jest在TypeScript中模拟导入的函数?

TypeScript + Babel + Jest 不使用 moduleNameMapper 来处理更少的文件

使用.ts文件(TypeScript)配置Jest全局测试设置

Jest 无法从测试文件中找到模块

如何导入TypeScript定义文件的文件

以Typescript导入JavaScript文件,无法访问TS中的函数,能够以html访问它们

Angular / Typescript-由于模块定义,无法强制转换导入的'* .json'文件

无法导入某些文件

无法导入原始文件

无法导入XLSX文件

Jest无法从npm链接模块转换导入