Comment résoudre «Impossible d'utiliser l'instruction d'importation en dehors d'un module» en plaisantant

J'ai une application React (n'utilisant pas Create React App) construite en utilisant TypeScript, Jest, Webpack et Babel. Lorsque j'essaie d'exécuter "plaisanterie de fil", j'obtiens l'erreur suivante:

J'ai essayé de supprimer tous les packages et de les rajouter. Cela ne résout pas cela. J'ai regardé des questions et des documents similaires et je continue de mal comprendre quelque chose. Je suis allé jusqu'à suivre un autre guide pour configurer cet environnement à partir de zéro et j'ai toujours reçu ce problème avec mon code.

Les dépendances comprennent ...

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

Les lignes d'importation du composant ...

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

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

Je m'attendais à pouvoir utiliser les importations nommées dans mes composants sans que mes tests explosent. Il semble résoudre le problème si je n'utilise que les importations par défaut via ma solution, mais je préférerais ne pas suivre cette voie.

Solution: mes importations nommées provenaient de fichiers index.js et je pense que ts-jest en avait besoin en tant que fichiers index.ts (j'utilise Typescript). Si quelqu'un d'autre rencontre cette erreur, cela n'a pas empêché de vérifier si vous avez dérivé vos extensions de fichier.

J'ai perdu beaucoup de temps, malheureusement, mais j'ai beaucoup appris sur les configurations de webpack et Babel.

Pour de futures références,

J'ai résolu le problème en utilisant la configuration ci-dessous, après avoir lu la réponse de 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",
  }
};

essayez cette chose si vous utilisez babel 6 1) Ajout de @ babel / plugin-transform-modules-commonjs dans la section plugin de babel.config.js

ou

2) Pour mon cas, le problème d'importation était dû à la chute du fichier de réaction en ajoutant cela à transfromIgnorePatterns "transformIgnorePatterns": ["/ node_modules / (?! react-file-drop)" "],

J'ai rencontré le même problème avec Typescript, Jest et VueJS / VueCli 3. La construction normale n'a aucun problème. n'arrive que pour Jest. J'ai lutté pendant des heures en cherchant. Mais aucune réponse ne fonctionne réellement. Dans mon cas, j'ai une dépendance vis-à-vis de mon propre package dactylographié que je spécifie "cible": "es6" dans tsconfig.json . Voilà la cause profonde. La solution consiste donc simplement à rétablir les dépendants en es5 tsconfig.json:

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

Utilisez Babel pour transpiler ces modules JS et vous pourrez écrire vos tests avec es6.

Installer Babel / preset-env

npm i -D @babel/preset-env

Créer un fichier de configuration babel avec le preset

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