導入 React = 'SyntaxError: 不能在模塊外使用導入語句'

Question

作為課程的一部分，我需要使用 React 和 Redux 從頭開始​​構建一個 Web 應用程序。

我花了幾天時間嘗試設置所有內容，同時嘗試配置所有必要的設置以使用 Jest 和 Enzyme 測試應用程序。

但是，我所嘗試的一切都導致了某種形式的錯誤消息，從而阻止了測試的運行。

老實說，我不知道我做錯了什么，但它似乎一團糟。

有誰知道為什么我的測試的錯誤消息標記了 React 導入？ 語法錯誤：不能在模塊外使用導入語句

這是我的 package.json 文件：

  {"type": "module",
  "name": "reddit-client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.5.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "babel-jest": "^26.6.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.3",
    "react-scripts": "^1.1.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest",
    "eject": "react-scripts eject",
    "test:watch": "npm test -- --watch"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "transform": {
    "\\.js$": "<rootDir>/node_modules/babel-jest"
  },
  "devDependencies": {
    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.2",
    "enzyme": "^3.11.0",
    "jest": "^26.6.0",
    "jest-enzyme": "^7.1.2"
  }
}

連同我的 .babelrc 文件：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "transformIgnorePatterns": [
  "node_modules/(?!(babel-jest)/)"
  ]
}

和測試本身，它沒有任何代碼。 但據我所知，此時應該無關緊要？：

import React from 'react';
import Header from './Header.js';
import {shallow } from 'enzyme';

it('should render without errors', () => {

});

您能給我的任何建議讓我啟動並運行它，我們將不勝感激！

Answer 1

您可以使用@babel/plugin-transform-modules-commonjs將您的模塊轉換為 commonjs。

這是您當前的.babelrc文件，但帶有插件：

{
  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/plugin-transform-modules-commonjs"],
  "transformIgnorePatterns": [
  "node_modules/(?!(babel-jest)/)"
  ]
}

記得安裝@babel/plugin-transform-modules-commonjs 。

我不確定這是否會消除您的錯誤，因為您沒有提供最小的可重現示例，但我很確定它會起作用。

Answer 2

你定義了你的適配器嗎？

（進口） 。
從“酶”導入酶；
從“@wojtekmaj/enzyme-adapter-react-17”導入適配器；

（適配器） 。
Enzyme.configure({adapter: new Adapter() });

我相信，我也面臨類似的問題，直到我添加了適配器，然后測試很順利。