反应测试库和创建反应应用程序出错（SyntaxError: Unexpected identifier import ArrayFrom from "./polyfills/array.from.mjs";）答案

【问题标题】：Error with react testing library and create react app (SyntaxError: Unexpected identifier import ArrayFrom from "./polyfills/array.from.mjs";)反应测试库和创建反应应用程序出错（SyntaxError: Unexpected identifier import ArrayFrom from "./polyfills/array.from.mjs";）
【发布时间】：2020-08-15 09:59:54
【问题描述】：

我知道当你有一个裸 React 应用程序时，你将 webpack 配置为使用 babel，然后 jest 正在使用 babel 配置来编译模块。

现在我有一个使用 create-react-app 创建的应用程序。使用 package.json 如下：

{
  "name": "it does not matter",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-redux": "^7.2.0",
    "react-redux-loading": "^1.0.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "1.1.1",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

在这样的情况下，我编写了最简单的测试，结果以绿色通过：

import React from "react";
import ReactDOM from "react-dom";

it("renders LoggedUser without crashing", () => {
  const div = document.createElement("div");
  const name = "::name::";
  const avatarURL = "::avatarURL::";
  const loggedUser = { name, avatarURL };
  ReactDOM.render(<LoggedUser loggedUser={loggedUser} />, div);
});

现在我按照 create react app 文档添加 React 测试库： https://create-react-app.dev/docs/running-tests/#option-2-react-testing-library

我按照步骤操作，但是在运行测试时它抱怨：

import React from "react";
import { render } from "@testing-library/react";
import { LoggedUser } from "../components/LoggedUser";

it("renders LoggedUser without crashing", () => {
  const name = "::name::";
  const avatarURL = "::avatarURL::";
  const loggedUser = { name, avatarURL };
  render(<LoggedUser loggedUser={loggedUser} />);
});

import ArrayFrom from "./polyfills/array.from.mjs";
           ^^^^^^^^^

SyntaxError: Unexpected identifier

在我的包中，我只添加了依赖项：

"devDependencies": {
    "@testing-library/jest-dom": "^5.5.0",
    "@testing-library/react": "^10.0.4"
  }

按照文档的建议，创建了一个 src/setupTests.js 文件

// react-testing-library renders your components to document.body,
// this adds jest-dom's custom assertions
import '@testing-library/jest-dom/extend-expect';

我已经尝试了很多东西（一个带有和不带有 jest.config 文件的 .babelrc 文件...）但我无法通过测试，当修复一个问题时又出现了另一个问题...

也许某人熟悉这个问题及其可能的解决方案。

干杯！

【问题讨论】：

标签： jestjs create-react-app react-testing-library

【解决方案1】：

好吧，最后我试图做的事情非常扭曲，因为我在使用 create-react-app 样板时不太了解 webpack-babel-jest 委托......

所以我从头开始制作了另一个应用程序并且它确实可以工作，所以我只是在我的真实应用程序中更新了"react-scripts": "3.x.x" 以使其正常工作。

我为所有这些麻烦道歉，无论如何挖掘样板是很有教育意义的。

还是谢谢你！

【讨论】：