[英]Error in .tsx React component when debugging typescript tests using ts-jest
I'm trying to debug my typescript tests in a React app, using ts-jest
. 我正在尝试使用
ts-jest
在React应用程序中调试我的打字稿测试。
My project was generated with create-react-app
. 我的项目是使用
create-react-app
。 I can run my typescript tests perfectly with the provided "test": "react-scripts-ts test --env=jsdom"
我可以使用提供的
"test": "react-scripts-ts test --env=jsdom"
完美运行我的打字稿测试"test": "react-scripts-ts test --env=jsdom"
But for debugging them I'm trying adding a script entry in package.json like this: "test:debug": "node --inspect-brk ./node_modules/jest/bin/jest.js --config=jest.config.debug.json"
但是为了调试它们,我试图在package.json中添加一个脚本条目,例如:
"test:debug": "node --inspect-brk ./node_modules/jest/bin/jest.js --config=jest.config.debug.json"
When I run this like: npm run test:debug
I get the expected message: Debugger listening on ws://127.0.0.1:9229/bc733a7d-01d8-42eb-a18d-e59fe30a6393
But when I connect with Chrome DevTools, I click run and then, many of my tests run and pass, but I get this error when running perhaps the only test I made in a .test.tsx file. 当我像这样运行时:
npm run test:debug
我收到预期的消息: Debugger listening on ws://127.0.0.1:9229/bc733a7d-01d8-42eb-a18d-e59fe30a6393
但是当我与Chrome DevTools连接时,我单击运行然后,我的许多测试都运行并通过,但是运行也许是在.test.tsx文件中进行的唯一测试时,却出现此错误。
PASS src/chrome/ChromeBrowserController.test.ts
PASS src/utils/session-string-parser.test.ts
PASS src/model/mutators/WindowAndTabMutator.test.ts
PASS src/utils/initialise-fake-chrome-api.test.ts
PASS src/factory/BananaFactory.test.ts
PASS src/model/DefaultSessionProvider.test.ts
PASS src/serialisation/MarkdownSerialisation.test.ts
PASS src/serialisation/JSONSerialisation.test.ts
FAIL src/BananaTabs.test.tsx
● 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.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
/Users/julian/work/personal/bananatabs/src/view/icons/share.svg:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<?xml version="1.0" encoding="iso-8859-1"?>
^
SyntaxError: Unexpected token <
14 | rename: boolean;
15 | delete: boolean;
> 16 | };
| ^
17 | onRenameAction?(): void;
18 | onDeleteAction?(): void;
19 | onCopyAction?(): void;
at ScriptTransformer._transformAndBuildScript (node_modules/jest/node_modules/jest-runtime/build/script_transformer.js:403:17)
at Object.<anonymous> (src/view/TabToolsView.tsx:16:12)
Test Suites: 1 failed, 1 skipped, 10 passed, 11 of 12 total
Tests: 23 skipped, 64 passed, 87 total
Snapshots: 0 total
Time: 4.848s, estimated 7s
Ran all test suites.
The error is pointing to another .tsx file which is a React component, not a test. 错误指向另一个.tsx文件,它是一个React组件,而不是一个测试。
This is the content of my jest.config.debug.json
这是我的
jest.config.debug.json
的内容
{
"preset": "ts-jest",
"transformIgnorePatterns": ["node_modules/"]
}
What am I doing wrong? 我究竟做错了什么? Any ideas?
有任何想法吗?
In your Jest config, you need to stub some files that Jest doesn't understand. 在您的Jest配置中,您需要对一些Jest无法理解的文件进行存根。
https://jestjs.io/docs/en/webpack https://jestjs.io/docs/en/webpack
moduleNameMapper: { '\\\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/config/jest/mock/fileMock.js', '\\\\.(css|less)$': 'identity-obj-proxy', }
fileMock.js: fileMock.js:
module.exports = 'test-file-stub';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.