javascript - 附加到 Jest 运行的调试器不起作用;所有测试都因 JSX 错误而崩溃
问题描述
当按照这些说明 ( https://jestjs.io/docs/en/troubleshooting ) 使用带有 Jest 的交互式调试器时,我无法让规范以与使用yarn运行它们时相同的方式运行。
基本上,我的预期结果应该是这样的
(使用 Yarn 运行时)
$ yarn test --watchAll --coverage
PASS src/components/blurb_box.test.js (5.039s)
PASS src/components/logo_container.test.js (5.04s)
PASS src/reducers/logo_reducer.test.js
...
FAIL src/components/app_container.test.js (5.514s)
...
PASS src/components/momeas_logo_inner.test.js
PASS src/components/marble.test.js
PASS src/components/App.test.js
PASS src/components/rings.test.js
PASS src/actions/index.test.js
PASS src/trig.test.js
PASS src/reducers/marbles_reducer.test.js
PASS src/reducers/focused_reducer.test.js
PASS src/parse_url_utils.test.js
PASS src/behaviors/does_touch_something_else.test.js
-------------------------------|----------|----------|----------|----------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
-------------------------------|----------|----------|----------|----------|-------------------|
All files | 68.85 | 62.96 | 58.46 | 69.2 | |
src | 90.2 | 82.14 | 100 | 91.67 | |
constants.js | 100 | 100 | 100 | 100 | |
index.js | 0 | 0 | 100 | 0 | 15,17,19,30 |
parse_url_utils.js | 100 | 100 | 100 | 100 | |
settings.js | 100 | 100 | 100 | 100 | |
trig.js | 95.24 | 95 | 100 | 100 | 51 |
src/actions | 57.14 | 100 | 40 | 57.14 | |
index.js | 57.14 | 100 | 40 | 57.14 |... 81,106,108,112 |
src/behaviors | 92.86 | 75 | 100 | 92.86 | |
does_touch_something_else.js | 92.86 | 75 | 100 | 92.86 | 33 |
src/components | 57.26 | 32.35 | 42.5 | 57.89 | |
App.jsx | 100 | 100 | 100 | 100 | |
app_container.js | 64.71 | 50 | 42.11 | 64 |... 98,215,229,230 |
blurb_box.js | 75 | 0 | 50 | 75 | 7 |
logo_container.js | 100 | 100 | 100 | 100 | |
marble.js | 12.12 | 0 | 0 | 12.9 |... 67,171,175,178 |
momeas_logo_inner.js | 100 | 100 | 100 | 100 | |
rings.js | 88.24 | 75 | 60 | 88.24 | 55,60 |
src/reducers | 73.17 | 93.33 | 80 | 72.5 | |
focused_reducer.js | 100 | 100 | 100 | 100 | |
logo_reducer.js | 100 | 100 | 100 | 100 | |
marbles_reducer.js | 50 | 80 | 66.67 | 50 |... 72,73,75,76,78 |
-------------------------------|----------|----------|----------|----------|-------------------|
Test Suites: 1 failed, 13 passed, 14 total
Tests: 1 failed, 60 passed, 61 total
Snapshots: 0 total
Time: 12.937s
Ran all test suites.
基本上我应该看到 1 个失败的测试和 13 个通过的测试。
相反,当我运行
node --inspect-brk node_modules/.bin/jest --runInBand
能够将交互式调试器附加到我的开玩笑运行时,我得到所有这些错误相关的解析错误。
我能够成功进入chrome://inspect
并实际附加调试器,这反过来又触发了测试运行本身
然后几乎我所有的测试都失败了,出现了这些错误(显示了部分结果)
$ node --inspect-brk node_modules/.bin/jest --runInBand
Debugger listening on ws://127.0.0.1:9229/427ca26e-78cd-42c6-8aff-28f07327f16b
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
FAIL src/reducers/focused_reducer.test.js
● Test suite failed to run
/Users/jason/Work/Momeas Interactive/momeas_com/momeas_com3/client/src/reducers/focused_reducer.test.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from 'react';
^^^^^
SyntaxError: Unexpected identifier
at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
FAIL src/reducers/marbles_reducer.test.js
● Test suite failed to run
/Users/jason/Work/Momeas Interactive/momeas_com/momeas_com3/client/src/reducers/marbles_reducer.test.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from 'react';
^^^^^
SyntaxError: Unexpected identifier
at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
FAIL src/reducers/logo_reducer.test.js
● Test suite failed to run
/Users/jason/Work/Momeas Interactive/momeas_com/momeas_com3/client/src/reducers/logo_reducer.test.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from 'react';
^^^^^
SyntaxError: Unexpected identifier
at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
FAIL src/parse_url_utils.test.js
● Test suite failed to run
/Users/jason/Work/Momeas Interactive/momeas_com/momeas_com3/client/src/parse_url_utils.test.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from 'react';
^^^^^
SyntaxError: Unexpected identifier
at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
FAIL src/actions/index.test.js
● Test suite failed to run
/Users/jason/Work/Momeas Interactive/momeas_com/momeas_com3/client/src/actions/index.test.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from 'react';
^^^^^
SyntaxError: Unexpected identifier
at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
FAIL src/behaviors/does_touch_something_else.test.js
● Test suite failed to run
/Users/jason/Work/Momeas Interactive/momeas_com/momeas_com3/client/src/behaviors/does_touch_something_else.test.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import doesTouchSomethingElse from './does_touch_something_else';
^^^^^^^^^^^^^^^^^^^^^^
SyntaxError: Unexpected identifier
at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
FAIL src/components/blurb_box.test.js
● 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:
SyntaxError: /Users/jason/Work/Momeas Interactive/momeas_com/momeas_com3/client/src/components/blurb_box.test.js: Unexpected token (15:14)
13 | it('able to shallow render', () => {
14 | expect(
> 15 | shallow(<BlurbBox />).find('div.blurb').length
| ^
16 | ).toBe(1)
17 | })
18 | })
at Parser.raise (node_modules/babel-jest/node_modules/@babel/parser/src/parser/location.js:41:63)
FAIL src/components/logo_container.test.js
● Test suite failed to run
/Users/jason/Work/Momeas Interactive/momeas_com/momeas_com3/client/src/components/logo_container.test.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from 'react';
^^^^^
SyntaxError: Unexpected identifier
at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
我的 client/package.json 文件是
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"@dr-kobros/react-webfont-loader": "^8.0.0",
"bootstrap": "^4.3.1",
"deep-freeze": "^0.0.1",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"isomorphic-fetch": "^2.2.1",
"node-sass": "^4.12.0",
"prop-types": "^15.7.2",
"query-string": "^6.9.0",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-helmet": "^5.2.1",
"react-redux": "^7.1.3",
"react-scripts": "3.1.1",
"react-thunk": "^1.0.0",
"react-use": "^13.12.2",
"reactstrap": "^8.0.1",
"redux": "^4.0.5",
"styled-components": "^4.3.2",
"thunk": "^0.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"cypress": "cypress open",
"lint": "./node_modules/.bin/eslint ."
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@testing-library/dom": "^6.10.1",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"axios": "^0.19.0",
"cypress": "^3.8.0",
"fetch": "^1.1.0"
},
"jest": {
"coverageReporters": [
"html",
"text"
]
}
}
我的client/.bablerc.json
文件是这个,但是这个 bablerc 文件的存在与否对错误没有影响
{ "presets":["react","es2015","stage-1"] }
解决方案
推荐阅读
- node.js - Discord.JS 从消息中获取所有附件
- html - 如何迭代 Map 值的值
- python - 如何在 PDB 中输入 Python 代码而不将其解释为命令?
- java - 为什么我不能访问类变量的值,因为类变量是在创建对象时初始化的
- database - PostgreSQL vs MongoDB 在 Django 应用程序中执行 python 函数
- python - 如何连续循环我的比特币价格检查器?
- javascript - REACT NATIVE:如何获取 API 数据 (JSON) 并插入到 Flatlist、API
- verilog - 将 4 位计数器的输出连接到 Hex 到 7-Seg 解码器并创建测试台
- c# - 如何使用 .Net Core 验证 KeyCloak 提供的 JWT?
- regex - 如何在不拆分 McDonald 的情况下将 camelCase 与 Regex 拆分?