来自 create-react-app 的玩笑不在 Windows 上运行

Posted 2023-02-22

【中文标题】来自 create-react-app 的玩笑不在 Windows 上运行

【英文标题】：Jest from create-react-app not running on Windows

【发布时间】：2019-05-31 19:50:04

【问题描述】：

我在使用 Windows 8.1 上的 create-react-app 创建的全新安装应用程序运行 Jest 时遇到问题。安装后，运行命令npm run test，报错：

No tests found related to files changed since last commit.

运行jest --watchAll，因此绕过反应脚本，但在同一目录中显示：

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: E:\demo\src\App.test.js: Unexpected token (7:18)

  5 | it('renders without crashing', () => 
  6 |   const div = document.createElement('div');
> 7 |   ReactDOM.render(<App />, div);
    |                   ^
  8 |   ReactDOM.unmountComponentAtNode(div);
  9 | );

谷歌搜索了很长一段时间并遵循人们对类似问题的建议，我开始在我的 package.json 中添加 Babel devDependencies。然后变成了这样：

"devDependencies": 
    "@babel/core": "^7.2.2",
    "@babel/plugin-proposal-class-properties": "^7.2.3",
    "@babel/plugin-transform-runtime": "^7.2.0",
    "@babel/preset-env": "^7.2.3",
    "@babel/preset-react": "^7.0.0",
    "@babel/register": "^7.0.0",
    "@babel/runtime": "^7.2.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.6.0",
    "babel-loader": "^8.0.5",
    "babel-plugin-root-import": "^6.1.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react-optimize": "^1.0.1",
    "jest-transform-stub": "^1.0.0"
  

我还将 .babelrc 文件添加为：

    "presets": [
        "@babel/react" ,
        "@babel/env"
    ],
    "plugins": [
        "@babel/plugin-proposal-class-properties"
    ]
 

无论我尝试哪种组合，我总是会遇到不同的错误，而且这是不对的。看看互联网上的人们，所有人都可以通过 create-react-app 开箱即用地使用 Jest 命令。

对所有这些依赖项的最后一次尝试导致以下错误：

Test suite failed to run

    E:\dev\demo\src\App.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-runtime/build/script_transformer.js:403:17)

有什么想法吗？！我很困惑。

【问题讨论】：

如果您在使用 npm test 运行测试时遇到问题，这是 XY 问题。解决方案可能是***.com/questions/39724017/… 或可能是npm test a。

看在上帝的份上，npm test a 就是答案，而且效果很好。谢谢，@estus。如果需要，请将您的解决方案添加为正常答案，以便我将其标记为正确答案。

我自己无法测试。很高兴它有效。将其添加到答案中，希望这对其他人有所帮助。

【参考方案1】：

create-react-app 是生成 react-scripts 预配置设置的 CLI，其中包括 Webpack 和 Jest 配置等。

当Jest直接作为jest使用时，会忽略生成的配置，需要从头开始配置。

应使用npm test（在 CRA 设置中默认为 react-scripts test）而不是 jest 以使用生成的 Jest 配置。

如果npm test 的问题是交互模式：

未找到与自上次提交以来更改的文件相关的测试。按a 运行所有测试，或使用--watchAll 运行Jest

可以通过npm test a解决。

【参考方案2】：

只是为了澄清@estus-flask的答案。 有 2 个解决方案。

第一个解决方案：

package.json

"scripts": 
  "test": "react-scripts test --watchAll",
  ...
,

然后运行

npm test

第二种解决方案：

或者当你运行测试时，像这样运行它们：

npm test a

【参考方案3】：

就我而言，我正在运行 Azure DevOps 管道，以构建 React 应用并将其部署到 Azure 应用服务。所以我用下面的脚本任务来做npm install，npm build，然后测试如下。

- script: |
    echo Working dir and file list are as follows.
    echo -----------------------------------------
    pwd
    ls -la
    echo Changing directory to reactonazure
    ehco ----------------------------------
    cd reactonazure
    echo Working dir and file list now after chaning directory are as follows.
    echo ---------------------------------------------------------------------
    pwd
    ls -la
    echo Running npm install
    echo -------------------
    npm install
    echo Running npm build --if-present
    echo ------------------------------
    npm run build --if-present
    echo Running CI=true npm test
    echo ------------------------             
    CI=true npm test
  displayName: 'npm install, build and test'

您可以忽略 echo、ls、pwd 和 cd 语句。重点是最后一个

CI=true npm test

终于开始工作了。之前我有

npm run test --if-present

这给了我错误。

No tests found related to files changed since last commit.