尝试在 React 组件上运行测试文件时出错

Question

当我尝试为 React 组件运行单元测试时，我遇到了此错误。我使用 VSCode，所以我注意到当我编写 Expect().toBe(..) 时，它不会自动建议该术语，所以我认为我的文件有问题。我在另一个项目上进行了测试，自我暗示效果很好。我只使用基本的 true 断言来测试测试文件是否有效

\n

    Jest encountered an unexpected token\n\n    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.\n\n    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.\n\n    By default "node_modules" folder is ignored by transformers.\n\n    Here's what you can do:\n     \xe2\x80\xa2 If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.\n     \xe2\x80\xa2 To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.\n     \xe2\x80\xa2 If you need a custom transformation specify a "transform" option in your config.\n     \xe2\x80\xa2 If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.\n\n    You'll find more details and examples of these config options in the docs:\n    https://jestjs.io/docs/configuration\n    For information about custom transformations, see:\n    https://jestjs.io/docs/code-transformation\n\n    Details:\n\n    /Users/daniel/Documents/GitHub/flinder-react/src/components/FirstStep.test.js:1\n    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import React from 'react';\n                                                                                      ^^^^^^\n\n    SyntaxError: Cannot use import statement outside a module\n\n      at Runtime.createScriptFromCode (node_modules/jest/node_modules/jest-runtime/build/index.js:1479:14)\n\nTest Suites: 1 failed, 1 total\nTests:       0 total\nSnapshots:   0 total\nTime:        0.311 s\nRan all test suites.\nnpm ERR! code ELIFECYCLE\nnpm ERR! errno 1\nnpm ERR! flinder-react@0.1.0 test: `jest`\nnpm ERR! Exit status 1\nnpm ERR! \nnpm ERR! Failed at the flinder-react@0.1.0 test script.\nnpm ERR! This is probably not a problem with npm. There is likely additional logging output above.\n\nnpm ERR! A complete log of this run can be found in:\nnpm ERR!     /Users/daniel/.npm/_logs/2021-09-03T23_14_44_337Z-debug.log\ndaniel@daniels-Air flinder-react % npm run test\n\n> flinder-react@0.1.0 test /Users/daniel/Documents/GitHub/flinder-react\n> jest\n\n FAIL  src/components/FirstStep.test.js\n  \xe2\x97\x8f Test suite failed to run\n\n    Jest encountered an unexpected token\n\n    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.\n\n    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.\n\n    By default "node_modules" folder is ignored by transformers.\n\n    Here's what you can do:\n     \xe2\x80\xa2 If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.\n     \xe2\x80\xa2 To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.\n     \xe2\x80\xa2 If you need a custom transformation specify a "transform" option in your config.\n     \xe2\x80\xa2 If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.\n\n    You'll find more details and examples of these config options in the docs:\n    https://jestjs.io/docs/configuration\n    For information about custom transformations, see:\n    https://jestjs.io/docs/code-transformation\n\n    Details:\n\n    SyntaxError: /Users/daniel/Documents/GitHub/flinder-react/src/components/FirstStep.test.js: Support for the experimental syntax 'jsx' isn't currently enabled (10:33):\n\n       8 | describe('FirstStep', () => {\n       9 |     it('button is disabled', () => {\n    > 10 |         const wrapper = shallow(<FirstStep />);\n         |                                 ^\n      11 |         const button  = wrapper.find("Button");\n      12 |         \n      13 |         expect(button.props().disabled).toBe(true);\n\n    Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.\n    If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.\n\n      at Parser._raise (node_modules/@babel/parser/src/parser/error.js:134:45)\n      at Parser.raiseWithData (node_modules/@babel/parser/src/parser/error.js:129:17)\n      at Parser.expectOnePlugin (node_modules/@babel/parser/src/parser/util.js:198:18)\n      at Parser.parseExprAtom (node_modules/@babel/parser/src/parser/expression.js:1275:18)\n      at Parser.parseExprSubscripts (node_modules/@babel/parser/src/parser/expression.js:652:23)\n      at Parser.parseUpdate (node_modules/@babel/parser/src/parser/expression.js:632:21)\n      at Parser.parseMaybeUnary (node_modules/@babel/parser/src/parser/expression.js:604:23)\n      at Parser.parseExprOps (node_modules/@babel/parser/src/parser/expression.js:374:23)\n      at Parser.parseMaybeConditional (node_modules/@babel/parser/src/parser/expression.js:340:23)\n      at Parser.parseMaybeAssign (node_modules/@babel/parser/src/parser/expression.js:279:21)\n\nTest Suites: 1 failed, 1 total\nTests:       0 total\nSnapshots:   0 total\nTime:        0.395 s\nRan all test suites.\nnpm ERR! code ELIFECYCLE\nnpm ERR! errno 1\nnpm ERR! flinder-react@0.1.0 test: `jest`\nnpm ERR! Exit status 1\nnpm ERR! \nnpm ERR! Failed at the flinder-react@0.1.0 test script.\nnpm ERR! This is probably not a problem with npm. There is likely additional logging output above.\n\nnpm ERR! A complete log of this run can be found in:\nnpm ERR!     /Users/daniel/.npm/_logs/2021-09-03T23_17_16_517Z-debug.log\n

\n

Answer 1

您正在尝试使用模块语法，但 Jest 默认使用 commonjs 语法。

SyntaxError: Cannot use import statement outside a module

Jest 支持 es 模块，但目前处于实验阶段，不太稳定。您现在可以使用 babel-jest 来转译您的代码。在你的笑话配置中添加一个转换定义并使用 babel 预设。阅读更多相关信息： https: //www.npmjs.com/package/babel-jest 在 jest 的“入门”指南中： https: //jestjs.io/docs/getting-started