时间戳

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

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

问题描述

我知道当你有一个裸 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 docs 添加 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 文件......）但是我无法通过测试，当修复一个问题时，另一个问题出现了......

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

干杯!

标签： jestjscreate-react-appreact-testing-library

解决方案

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

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

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

还是非常感谢！

推荐阅读