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


11

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:

erreur de plaisanterie

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.


Pour info, je rencontrais cela lors de la configuration d'un TestSequencer personnalisé pour Jest et je suis simplement passé à l'utilisation requirede import, juste pour ce seul fichier.
Joshua Pinter

Réponses:


3

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.


0

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

0

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


0

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

Qu'avez-vous changé?
Nida Munir

1
Désolé pour l'erreur dans mon message d'origine. J'utilisais es6 dans le module dépendant. C'est la cause profonde du problème. Après être revenu à es5 , le problème est résolu
Jianwu Chen

-1

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']}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.