来自create-react-app的笑话未在Windows上运行 [英] Jest from create-react-app not running on Windows

问题描述

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

I have a problem running Jest from a clean installed app created using create-react-app on Windows 8.1. After the installation, running the command npm run test, I get the error:

No tests found related to files changed since last commit.

No tests found related to files changed since last commit.

运行jest --watchAll，因此绕过同一目录中的react-scripts会显示:

Running jest --watchAll, so bypassing the react-scripts, in the same directory, though, shows:

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.它变成了这样:

Googling for quite while and following people's suggestions on similar issues, I started adding Babel devDependencies on my package.json. And it became like this:

"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文件添加为:

I also added the .babelrc file as:

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

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

And no matter the combinations I try, I always get different errors and this can't be right. Looking at people on the internet, all are able to use the Jest command out of the box with create-react-app.

最后一次尝试使用所有这些依赖项会导致以下错误:

The last try with all those dependencies results in the following error:

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)

有什么想法吗?！我感到莫名其妙.

Any ideas?! I am baffled.

推荐答案

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

create-react-app is CLI that generates react-scripts pre-configured setup that includes Webpack and Jest configuration, among other things.

当Jest直接用作jest时，它将忽略生成的配置，并且需要从头开始进行配置.

When Jest is used directly as jest, it ignores generated configuration and requires to be configured from scratch.

npm test(在CRA设置中默认为react-scripts test)代替jest来利用生成的Jest配置.

npm test (defaults to react-scripts test in CRA setup) should be used instead of jest to make use of generated Jest configuration.

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

In case the problem with npm test is interactive mode:

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

No tests found related to files changed since last commit. Press a to run all tests, or run Jest with --watchAll

可以用npm test a寻址.

这篇关于来自create-react-app的笑话未在Windows上运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！