Jest 无法导入 TypeScript 文件

Question

执行示例测试时，出现以下错误：

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 中，我导出了以下 class：

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);
  });
});

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

Answer 1

尝试更改：

"target": "ESNext"

至

"target": "ES6"

正在发生的事情是 TypeScript 正在转换为 Jest 无法理解的太现代的 JS。如果仍然存在问题，您也可以尝试使用 ES5。

Answer 2

事实证明 lit-element 和 lit-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)/)"
    ]
}

Jest 无法导入 TypeScript 文件

Jest cannot import TypeScript file

javascript

typescript

jestjs

lit-element