web-dev-qa-db-fra.com

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 à l'aide de TypeScript, Jest, Webpack et Babel. Lorsque vous essayez d'exécuter "yarn jest", J'obtiens l'erreur suivante:

jest error

J'ai essayé de supprimer tous les packages et de les rajouter. Cela ne résout pas cela. J'ai regardé des questions et de la documentation 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 j'utilise uniquement les importations par défaut via ma solution, mais je préférerais ne pas suivre cette voie.

reactjsjestjsbabeljsbabel-jestts-jest
10
Logan Shoemaker

Solution: mes importations nommées provenaient de fichiers index.js et je crois 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 à ce sujet, malheureusement, mais j'ai beaucoup appris sur les configurations de webpack et Babel.

3
Logan Shoemaker

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
Onur Özkan

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 react en l'ajoutant à transfromIgnorePatterns "transformIgnorePatterns": ["/ node_modules/(?! react-file-drop)"]],

0
readytohackk