ts-jest 无法运行 tsx 测试文件，因为 "Import" 来自模块的 js 文件

Question

我正在尝试使用 ts-jest 到运行 tsx 测试文件 form.spec.tsx。

form.spec.tsx 导入 React Quill 编辑器和一些插件。

如何绕过导入 Quill 的名为 quill-mention 的插件的 SyntaxError: Unexpected identifier 错误？该模块涉及form.spec.tsx。

我已经在 jest 配置中的 transformIgnorePatterns 字段中添加了 ["<rootDir>/node_modules/"]，但是这个问题仍然存在 /node_modules/quill-mention/src/quill.mention.js

  ● Test suite failed to run

    /home/web/node_modules/quill-mention/src/quill.mention.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Quill from 'quill';
                                                                                                    ^^^^^

    SyntaxError: Unexpected identifier

      1 | import React from "react"
    > 2 | import "quill-mention";
        | ^

form.spec.tsx:

import {render, RenderResult, waitForElement} from "react-testing-library";
import ReactQuill, {Quill} from 'react-quill';
import "quill-mention";

const renderResult = render(
        <ReactQuill
            modules={
             {
                mention: {
                   allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
                   mentionDenotationChars: ["@", "#"],
                },
            }
        />
);

package.json

  "jest": {
    "transform": {
      "^.+\.tsx?$": "ts-jest"
    },
    "globals": {
      "ts-jest": {
        "tsConfig": "tsconfig.jest.json"
      },
      "window": {}
    },
    "testRegex": "(/watch/web/__tests__/.*|(\.|/)(test|spec))\.(jsxxxx?|tsx?)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ],
    "modulePaths": [
      "<rootDir>"
    ],
    "moduleNameMapper": {
      ".+\.(css|styl|less|sass|scss)$": "identity-obj-proxy",
      ".+\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/FileMock.js"
    },
    "transformIgnorePatterns": [
      "<rootDir>/node_modules/"
    ]
  }

tsconfig.jest.json:

{
  "compilerOptions": {
    "jsx": "react",
    "module": "commonjs",
    "target": "es6",
    "moduleResolution": "node",
    "removeComments": true,
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": false,
    "experimentalDecorators": true,
    "noLib": false,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "lib": ["es6", "dom"],
    "types": ["jest","reflect-metadata"],
    "inlineSources":true,
    "skipLibCheck": true,
    "esModuleInterop": true
  },
  "exclude": [
    "node_modules"
  ]
}

有人说 allowJs: true 可以修复它，但它不起作用。我所有的测试都失败了 JavaScript heap out of memory.

Answer 1

问题是 Jest 不是转换那个文件。在普通 JS 中，import 是无效的。您需要配置 Jest，以便它转换该文件。

首先，将 transform 更改为也处理扩展名为 js 或 jsx 的文件（除了 ts 文件:)

"jest": {
  "transform": {
    "^.+\.(ts|js)x?$": "ts-jest"
  },

接下来您需要将目录列入白名单，因此 Jest 会对其进行转换。这将跳过 node_modules 除了和 quill-mention 目录中的所有文件的转换。

    "transformIgnorePatterns": [
      "<rootDir>/node_modules/(?!(quill-mention)/)"
    ]

这应该可以解决 quill-mention 的问题。它现在应该失败并显示 ReferenceError: MutationObserver is not defined，这是一个不同的问题，与它使用的 Jest 的 JSDom 环境有关。您可以在此处阅读有关如何解决该问题的信息：

Testing MutationObserver with Jest

您可能还想考虑移动到 babel-jest + @babel/preset-typescript 而不是使用 ts-jest。

ts-jest 无法运行 tsx 测试文件，因为 "Import" 来自模块的 js 文件

ts-jest fails to run a tsx test file because of "Import" from a module's js file

javascript

typescript

reactjs

jestjs

ts-jest

ts-jest 无法 运行 tsx 测试文件，因为 "Import" 来自模块的 js 文件

ts-jest fails to run a tsx test file because of "Import" from a module's js file

javascript

typescript

reactjs

jestjs

ts-jest

ts-jest 无法运行 tsx 测试文件，因为 "Import" 来自模块的 js 文件