Как решить «Невозможно использовать оператор импорта вне модуля» в шутке

У меня есть приложение 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-jest нуждался в них как в файлах index.ts (я использую Typescript). Если кто-то еще сталкивается с этой ошибкой, не мешало бы проверить, если вы потеряли свои расширения файлов.

К сожалению, я потратил на это много времени, но многое узнал о конфигурации веб-пакетов и Babel.

Для будущих ссылок,

Я решил проблему, используя приведенный ниже конфиг jest, после прочтения ответа Логана Шумейкера.

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-transform-modules-commonjs в раздел плагинов babel.config.js

или

2) В моем случае проблема с импортом была связана с удалением файла реакции, добавив его в transfromIgnorePatterns "transformIgnorePatterns": ["/ node_modules / (?! Reaction-file-drop)"],

Я столкнулся с той же проблемой с Typescript, Jest и VueJS / VueCli 3. Обычная сборка не имеет проблем. бывает только для шутки. Я часами боролся с поиском. Но никакой ответ на самом деле не работает. В моем случае у меня есть зависимость от моего собственного пакета машинописного текста, который я определил как «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']}