用 Create React App 开玩笑：测试套件无法运行 - 意外的令牌

Posted 2023-02-22

【中文标题】用 Create React App 开玩笑：测试套件无法运行 - 意外的令牌

【英文标题】：Jest with Create React App: Test suite failed to run - Unexpected token

【发布时间】：2018-08-31 19:24:14

【问题描述】：

开箱即用的 create-react-app with jest 总是失败

我做的步骤

create-react-app cra-test
cd cra-test
yarn install

把原来package.json中的test改成这个

  "name": "cra-test",
  "version": "0.1.0",
  "private": true,
  "dependencies": 
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts": "1.1.1"
  ,
  "scripts": 
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest",
    "eject": "react-scripts eject"
  

当我运行yarn test 时，测试失败了。这是输出

yarn run v1.1.0
$ jest
FAIL  src\App.test.js
  ● Test suite failed to run

    .../cra-test/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 | );
        10 |

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        3.413s, estimated 12s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

我读到这可能是由于升级 Jest 导致它与 create-react-app 不兼容，但我没有这样做。

node --version && yarn --version && npm --version && create-react-app --version
v6.10.2
1.1.0
5.7.1
1.4.3

【问题讨论】：

为什么要更改原来的测试？

我同意@VivekN，只需创建应用程序，运行测试脚本即可 100% 工作。它还使用 Jest 进行测试。我对您要完成的工作感到困惑。

【参考方案1】：

我不知道原因，但我在下面修复了它。 export CI=1 Bibliography

【参考方案2】：

除非您弹出 create-react-app，否则您的根目录中既没有 babel 配置也没有 jest 配置，因此 jest 不知道它必须转换源。所以你必须创建.babelrc：

 "presets": [
   "react-app"
  ]

和 jest.config.js：

module.exports = 
  "collectCoverageFrom": [
    "src/**/*.js,jsx,mjs"
  ],
  "setupFiles": [
    "<rootDir>/config/polyfills.js"
  ],
  "testMatch": [
    "<rootDir>/src/**/__tests__/**/*.js,jsx,mjs",
    "<rootDir>/src/**/?(*.)(spec|test).js,jsx,mjs"
  ],
  "testEnvironment": "node",
  "testURL": "http://localhost",
  "transform": 
    "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
    "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
    "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
  ,
  "transformIgnorePatterns": [
    "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
  ],
  "moduleNameMapper": 
    "^react-native$": "react-native-web"
  ,
  "moduleFileExtensions": [
    "web.js",
    "mjs",
    "js",
    "json",
    "web.jsx",
    "jsx",
    "node"
  ]

这些配置你可以在你执行 npm runeject 之后找到。

babel-preset-react-app 应该安装，因为 jest config 引用它。另外，请注意 jest config 提到了 config 目录，它是 create-react-app 的一部分。这意味着没有它就无法工作，因此您需要从 create-react-app 复制该目录或编写自己的设置文件。

【讨论】：

我认为这不是原因。 Jest docs 使用 create-react-app 配置进行讨论。 jestjs.io/docs/es-ES/tutorial-react