我正在尝试使用 ts-jest
运行 tsx 测试文件 form.spec.tsx
.
form.spec.tsx
进口React Quill
编辑器和一些插件。
我怎样才能绕过 SyntaxError: Unexpected identifier
来自名为 quill-mention 的插件的错误导入 Quill
?该模块涉及form.spec.tsx
.
我已经添加了 ["<rootDir>/node_modules/"]
到 jest 配置中的 transformIgnorePatterns 字段,但是这个问题仍然存在于 /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";
| ^
表单.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: ["@", "#"],
},
}
/>
);
包.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
.
最佳答案
问题是 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
。
关于javascript - 由于模块的 js 文件中的 "Import",ts-jest 无法运行 tsx 测试文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58370492/