create-react-app中的Jest无法在Windows上运行

Question

我在Windows 8.1上使用 create-react-app 创建了一个干净的应用程序，运行Jest时遇到了问题。安装后，运行命令npm run test，我收到以下错误消息：

No tests found related to files changed since last commit.

但是，在相同目录下运行 jest --watchAll（绕过react-scripts）却能正常执行。

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)

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

- Dimitris Damilos

---

如果您在使用 npm test 运行测试时遇到问题，那么这可能是 XY 问题。解决方案可以参考 https://dev59.com/_1kS5IYBdhLWcg3wiXMj 或者尝试使用 npm test a 命令。 - Estus Flask

拜托了，npm test a 就是答案，而且它运行得很好。感谢 @estus。如果你愿意，可以将你的解决方案作为普通答案添加，这样我就可以将其标记为正确答案。 - Dimitris Damilos

我自己无法测试。很高兴它能够工作。将其添加到答案中，希望这能帮助其他人。 - Estus Flask

Answer 1

create-react-app 是一个 CLI 工具，它可以生成预配置的 react-scripts 设置，其中包括 Webpack 和 Jest 配置等内容。

当直接使用 jest 时，它会忽略生成的配置并要求从头开始进行配置。

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

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

  

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

可以通过 npm test a 解决这个问题。

- Estus Flask

---

我刚刚使用TypeScript模板安装了CRA，其中包含App.test.tsx文件。但是当我尝试按照您的建议（按下a键）时，它只显示“未找到测试，退出代码为0”。 - Thomas Soos

@ThomasSoos 错误不同，问题中的错误意味着没有新测试，而在您的情况下则完全没有测试。只要它在src/内部，我期望它能够正常工作。可能意味着Jest的开箱即用配置不正确。如果问题仍然存在，并且使用最新的CRA可重现，请考虑针对您的情况提出新问题。 - Estus Flask

是的，它在src文件夹下，我也希望它可以在没有任何额外配置的情况下工作。我会问一下周围的人，如果没有人知道，我会在这里发布一个新问题。谢谢您的回复！ - Thomas Soos

只是想回报一下，我找到了导致Jest无法找到单元测试的原因。该项目的一个父文件夹名称中包含方括号（“ [”和“]”）。当我删除它们后，Jest立即找到了测试并轻松运行了它们 ¯_(ツ)_/¯ - Thomas Soos

@ThomasSoos 谢谢分享，很有用。不过，路径中包含特殊字符导致问题并不罕见。 - Estus Flask

Answer 2

仅为澄清@estus-flask的答案。
有2种解决方案。

第一种解决方案：

package.json

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

And then run

npm test

第二种解决方案：

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

npm test .

- Omar Magdy

---

好的回答。这是我迄今为止找到的唯一避免“测试套件无法运行”错误的答案。 * 你可能想用npm test .替换第二个解决方案？ - Henke

@Henke 完成了！ :) - Omar Magdy

Answer 3

在我的情况下，我正在运行 Azure DevOps 管道，构建并部署 React 应用程序到 Azure 应用服务。因此，我使用以下脚本任务执行 npm 安装、npm 构建，然后进行测试。

- 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.

- VivekDev