Як вирішити "Неможливо використовувати оператор імпорту за межами модуля" на жарт

У мене є програма React (не використовуючи Create React App), створена за допомогою TypeScript, Jest, Webpack та Babel. При спробі запустити "пряжа є", я отримую таку помилку:

Я спробував видалити всі пакунки та повторно додати їх. Це не вирішує це. Я переглянув подібні запитання та документацію і все ще щось розумію. Я пішов так далеко, щоб слідувати іншому керівництву щодо налаштування цього середовища з нуля, і все-таки отримав цю проблему зі своїм кодом.

Залежності включають ...

"dependencies": {
        "@babel/plugin-transform-runtime": "^7.6.2",
        "@babel/polyfill": "^7.6.0",
        "babel-jest": "^24.9.0",
        "react": "^16.8.6",
        "react-dom": "^16.8.6",
        "react-test-renderer": "^16.11.0",
        "source-map-loader": "^0.2.4"
    },
    "devDependencies": {
        "@babel/core": "^7.6.0",
        "@babel/preset-env": "^7.6.0",
        "@babel/preset-react": "^7.0.0",
        "@types/enzyme": "^3.9.2",
        "@types/enzyme-adapter-react-16": "^1.0.5",
        "@types/jest": "^24.0.13",

Лінії імпорту компонента ...

import * as React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import HomePage from "./components/pages";
import {
    Footer,
    Header,
    Navigation,
} from "./components/shared";

Тестовий файл ....

import * as React from "react";
import * as renderer from "react-test-renderer";
import App from "../App";

it("Renders the Footer correctly", () => {
    const tree = renderer
        .create(<App />)
        .toJSON();
    expect(tree).toMatchSnapshot();
});

Я очікував, що зможу використовувати імпортний імпорт у своїх компонентах без моїх тестів. Здається, виправити проблему, якщо я використовую лише імпорт за замовчуванням через своє рішення, але я вважаю за краще не йти цим маршрутом.

Рішення: мій імпортований імпорт надходив з файлів index.js, і я вважаю, що ts-ji потрібен був у вигляді файлів index.ts (я використовую Typescript). Якщо хтось інший зіткнувся з цією помилкою, не могло не завадити перевірити, чи ви насмішили розширення файлів.

На це я, на жаль, витрачав багато часу, але багато дізнався про конфігурації веб-пакетів та про Вавілон.

Для подальших довідок,

Я вирішив проблему, скориставшись наведеною нижче конфігурацією, прочитавши відповідь Logan Shoemaker.

module.exports = {
  verbose: true,
  setupFilesAfterEnv: ["<rootDir>src/setupTests.ts"],
  moduleFileExtensions: ["js", "jsx", "ts", "tsx"],
  moduleDirectories: ["node_modules", "src"],
  moduleNameMapper: {
    "\\.(css|less|scss)$": "identity-obj-proxy"
  },
  transform: {
    '^.+\\.(ts|tsx)?$': 'ts-jest',
    "^.+\\.(js|jsx)$": "babel-jest",
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/file.js",
  }
};

спробуйте це, якщо ви використовуєте babel 6 1) Додавання @ babel / plugin-перетворення-модулі-commonjs у розділ плагінів babel.config.js

або

2) У моєму випадку проблема імпорту була пов'язана з падінням файлу реакції, додавши, що до transfromIgnorePatterns "transformIgnorePatterns": ["/ node_modules / (?! react-file-drop)"],

Я зіткнувся з тією ж проблемою з Typescript, Jest та VueJS / VueCli 3. У звичайній збірці немає проблем. трапляється тільки для Jest. Я боровся годинами пошуками. Але жодна відповідь насправді не працює. У моєму випадку я маю залежність від мого власного пакету машинопису, який я конкретно визначаю "target": "es6" у tsconfig.json . У цьому першопричина. Тож рішення - просто повернути утриманців назад на es5 tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    ...
  },
  ...
}

Використовуйте Babel, щоб перекласти ці модулі JS, і ви зможете написати свої тести за допомогою es6.

Встановити Babel / preset-env

npm i -D @babel/preset-env

Створіть файл конфігурації babel із попередньо встановленим

//babel.config.js
module.exports = {presets: ['@babel/preset-env']}