Come risolvere "Impossibile utilizzare l'istruzione import all'esterno di un modulo" in jest

Ho un'applicazione React (che non usa Create React App) creata usando TypeScript, Jest, Webpack e Babel. Quando provo a eseguire "jest filato", viene visualizzato il seguente errore:

Ho provato a rimuovere tutti i pacchetti e ad aggiungerli di nuovo. Non risolve questo. Ho esaminato domande e documentazione simili e sto ancora fraintendendo qualcosa. Sono arrivato al punto di seguire un'altra guida per configurare questo ambiente da zero e ho ancora ricevuto questo problema con il mio codice.

Le dipendenze includono ...

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

Le righe di importazione del componente ...

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

Il file di test ....

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

Mi aspettavo di poter usare le importazioni con nome nei miei componenti senza che i miei test fossero esplosi. Sembra risolvere il problema se uso solo le importazioni predefinite tramite la mia soluzione, ma preferirei non seguire questa strada.

Soluzione: le mie importazioni con nome venivano dai file index.js e credo che ts-jest ne avesse bisogno come file index.ts (sto usando Typescript). Se qualcun altro si imbatte in questo errore, non potrebbe far male a controllare se hai derlassato le estensioni dei file.

Ho perso molto tempo su questo, sfortunatamente, ma ho imparato molto sulle configurazioni del webpack e Babel.

Per riferimenti futuri,

Ho risolto il problema utilizzando la configurazione jest di seguito, dopo aver letto la risposta di 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",
  }
};

prova questa cosa se stai usando babel 6 1) Aggiunta di @ babel / plugin-transform-modules-commonjs nella sezione plugin di babel.config.js

o

2) Per il mio caso il problema dell'importazione era dovuto alla caduta del file di reazione aggiungendola a transfromIgnorePatterns "transformIgnorePatterns": ["/ node_modules / (?! reag-file-drop)"],

Ho riscontrato lo stesso problema con Typescript, Jest e VueJS / VueCli 3. La build normale non ha alcun problema. succede solo per Jest. Ho lottato per ore cercando. Ma nessuna risposta funziona davvero. Nel mio caso, ho una dipendenza dal mio pacchetto dattiloscritto che ho specifico "target": "es6" in tsconfig.json . Questa è la causa principale. Quindi la soluzione è semplicemente di riportare i dipendenti in es5 tsconfig.json:

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

Usa Babel per trascrivere quei moduli JS e sarai in grado di scrivere i tuoi test con es6.

Installa Babel / preset-env

npm i -D @babel/preset-env

Crea un file di configurazione babel con il preset

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