Reactjs 使用ts jest调试typescript测试时.tsx React组件出错
我正在尝试使用ts jest在React应用程序中调试我的typescript测试 我的项目是用CreateReact应用程序生成的。 使用提供的测试:react scripts ts test-env=jsdom,我可以完美地运行我的类型脚本测试 但为了调试它们,我尝试在package.json中添加一个脚本条目,如下所示: 测试:debug:node-inspect brk./node_modules/jest/bin/jest.js-config=jest.config.debug.json 当我像:npm run test:debug这样运行时,我得到了预期的消息: 在ws://127.0.0.1:9229/bc733a7d-01d8-42eb-a18d-e59fe30a6393上侦听的调试器 但是,当我连接Chrome DevTools时,我单击run,然后,我的许多测试都会运行并通过,但是当运行可能是我在.test.tsx文件中进行的唯一测试时,我会出现这个错误Reactjs 使用ts jest调试typescript测试时.tsx React组件出错,reactjs,typescript,svg,mocking,ts-jest,Reactjs,Typescript,Svg,Mocking,Ts Jest,我正在尝试使用ts jest在React应用程序中调试我的typescript测试 我的项目是用CreateReact应用程序生成的。 使用提供的测试:react scripts ts test-env=jsdom,我可以完美地运行我的类型脚本测试 但为了调试它们,我尝试在package.json中添加一个脚本条目,如下所示: 测试:debug:node-inspect brk./node_modules/jest/bin/jest.js-config=jest.config.debug.jso
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.
我做错了什么?
有什么想法吗?在Jest配置中,您需要存根一些Jest不理解的文件 模块映射:{ “\\.jpg | jpeg | png | gif | eot | otf | webp | svg | ttf | woff | woff2 | mp4 | webm | wav | mp3 | m4a | aac | oga$”: “/config/jest/mock/fileMock.js”, “\\.css”减去$:“identity obj proxy”, } fileMock.js:
module.exports='测试文件存根' 它更具体地指向svg文件,而不是tsx。如果您在应用程序中使用Webpack loader处理SVG,则可能需要导入捆绑应用程序,而不是src。
{
"preset": "ts-jest",
"transformIgnorePatterns": ["node_modules/"]
}