[英]ts-jest fails to run a tsx test file because of “Import” from a module's js file
I'm trying to use ts-jest
to run a tsx test file form.spec.tsx
.我正在尝试使用ts-jest
运行 tsx 测试文件form.spec.tsx
。
The form.spec.tsx
imports React Quill
editor and some of the plugins. form.spec.tsx
导入React Quill
编辑器和一些插件。
How can I bypass SyntaxError: Unexpected identifier
error coming from a plugin called quill-mention that import Quill
?如何绕过SyntaxError: Unexpected identifier
error 来自名为quill-mention的导入Quill
的插件? This module is involved in form.spec.tsx
.该模块包含在form.spec.tsx
中。
I have added ["<rootDir>/node_modules/"]
to the transformIgnorePatterns field in jest configuration, but this problem still exists from /node_modules/quill-mention/src/quill.mention.js我已将["<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";
| ^
form.spec.tsx: 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 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: 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"
]
}
Someone says allowJs: true
could fix it but it doesn't work.有人说allowJs: true
可以修复它,但它不起作用。 All of my tests failed saying JavaScript heap out of memory
.我所有的测试都失败了,说JavaScript heap out of memory
。
The problem is that Jest is not transforming that file.问题是 Jest没有转换该文件。 And in plain JS, import
is not valid.而在纯 JS 中, import
是无效的。 You need to configure Jest so it will transform that file.您需要配置 Jest,以便它会转换该文件。
First, change the transform
to also process files with extensions js
or jsx
(in addition to ts
files:)首先,将transform
更改为也处理扩展名为js
或jsx
的文件(除了ts
文件:)
"jest": {
"transform": {
"^.+\\.(ts|js)x?$": "ts-jest"
},
Next you need to whitelist the directory, so Jest does transform it.接下来,您需要将该目录列入白名单,以便 Jest 对其进行转换。 This skips transforming all files in node_modules
except the quill-mention
dir.这会跳过转换 node_modules 中的所有文件,除了node_modules
quill-mention
目录。
"transformIgnorePatterns": [
"<rootDir>/node_modules/(?!(quill-mention)/)"
]
This should get past the problems with quill-mention
.这应该可以解决quill-mention
的问题。 And it should now fail with ReferenceError: MutationObserver is not defined
, which is a different issue, having to do with Jest's JSDom environment it uses.它现在应该失败,并出现ReferenceError: MutationObserver is not defined
,这是一个不同的问题,与它使用的 Jest 的 JSDom 环境有关。 You can read about how to fix that here:您可以在此处阅读有关如何解决此问题的信息:
Testing MutationObserver with Jest 用 Jest 测试 MutationObserver
You may also want to consider moving to babel-jest
+ @babel/preset-typescript
instead of using ts-jest
.您可能还想考虑使用babel-jest
+ @babel/preset-typescript
而不是使用ts-jest
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.