So lösen Sie im Import "Importanweisung kann nicht außerhalb eines Moduls verwendet werden" auf

Ich habe eine React-Anwendung (ohne Create React App), die mit TypeScript, Jest, Webpack und Babel erstellt wurde. Beim Versuch, "Garnscherz" auszuführen, wird die folgende Fehlermeldung angezeigt:

Ich habe versucht, alle Pakete zu entfernen und erneut hinzuzufügen. Dies wird nicht behoben. Ich habe mir ähnliche Fragen und Unterlagen angesehen und verstehe immer noch etwas falsch. Ich ging so weit, einer anderen Anleitung zum Einrichten dieser Umgebung von Grund auf zu folgen, und erhielt dieses Problem immer noch mit meinem Code.

Abhängigkeiten umfassen ...

"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",

Die Importzeilen der Komponente ...

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";

Die Testdatei ....

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();
});

Ich hatte erwartet, benannte Importe in meinen Komponenten verwenden zu können, ohne dass meine Tests explodierten. Es scheint das Problem zu beheben, wenn ich nur Standardimporte über meine Lösung verwende, aber ich würde es vorziehen, diesen Weg nicht zu gehen.

Lösung: Meine benannten Importe stammten aus index.js-Dateien und ich glaube, ts-jest brauchte sie als index.ts-Dateien (ich verwende Typescript). Wenn jemand anderes auf diesen Fehler stößt, kann es nicht schaden, zu überprüfen, ob Sie Ihre Dateierweiterungen derpediert haben.

Ich habe leider viel Zeit damit verschwendet, aber ich habe viel über Webpack-Konfigurationen und Babel gelernt.

Für zukünftige Referenzen,

Nachdem ich die Antwort von Logan Shoemaker gelesen hatte, löste ich das Problem mit der folgenden Scherzkonfiguration.

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",
  }
};

Versuchen Sie dies, wenn Sie babel 6 verwenden. 1) Hinzufügen von @ babel / plugin-transform-modules-commonjs im Plugin-Bereich von babel.config.js

oder

2) In meinem Fall war das Importproblem auf das Löschen der Reaktionsdatei zurückzuführen, indem das zu transfromIgnorePatterns "transformIgnorePatterns" hinzugefügt wurde: ["/ node_modules / (?! React-file-drop)"],

Ich habe das gleiche Problem mit Typescript, Jest und VueJS / VueCli 3 festgestellt. Der normale Build hat kein Problem. passiert nur für Jest. Ich kämpfte stundenlang mit der Suche. Aber keine Antwort funktioniert tatsächlich. In meinem Fall habe ich eine Abhängigkeit von meinem eigenen Typoskript-Paket, das ich in der Datei tsconfig.json als "Ziel" angegeben habe: "es6" . Das ist die Grundursache. Die Lösung besteht also einfach darin, die Abhängigen wieder in es5 tsconfig.json zu ändern:

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

Verwenden Sie Babel, um diese JS-Module zu transpilieren, und Sie können Ihre Tests mit es6 schreiben.

Installieren Sie Babel / preset-env

npm i -D @babel/preset-env

Erstellen Sie eine Babel-Konfigurationsdatei mit der Voreinstellung

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