Cómo resolver "No se puede usar la declaración de importación fuera de un módulo" en broma

Tengo una aplicación React (que no usa la aplicación Create React) creada con TypeScript, Jest, Webpack y Babel. Cuando intento ejecutar "broma de hilo", aparece el siguiente error:

He intentado eliminar todos los paquetes y volver a agregarlos. No resuelve esto. He examinado preguntas y documentación similares y sigo malinterpretando algo. Llegué al extremo de seguir otra guía para configurar este entorno desde cero y aún recibí este problema con mi código.

Las dependencias incluyen ...

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

Las líneas de importación 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";

El archivo de prueba ...

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

Esperaba poder usar importaciones con nombre en mis componentes sin que mis pruebas exploten. Parece solucionar el problema si solo uso importaciones predeterminadas a través de mi solución, pero preferiría no seguir esa ruta.

Solución: mis importaciones nombradas provenían de archivos index.js y creo que ts-jest los necesitaba como archivos index.ts (estoy usando Typecript). Si alguien más se encuentra con este error, no podría hacer daño para verificar si derrocó sus extensiones de archivo.

Desafortunadamente, perdí mucho tiempo en esto, pero aprendí mucho sobre las configuraciones de paquetes web y Babel.

Para futuras referencias,

Resolví el problema usando la siguiente configuración de jest, después de leer la respuesta 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",
  }
};

prueba esto si estás usando babel 6 1) Agregando @ babel / plugin-transform-modules-commonjs en la sección de plugins de babel.config.js

o

2) Para mi caso, el problema de importación se debió a la caída del archivo de reacción al agregarlo a transfromIgnorePatterns "transformIgnorePatterns": ["/ node_modules / (?! react-file-drop)"],

Encontré el mismo problema con Typecript, Jest y VueJS / VueCli 3. La compilación normal no tiene ningún problema. Solo sucede para Jest. Luché durante horas buscando. Pero ninguna respuesta realmente funciona. En mi caso, tengo una dependencia en mi propio paquete mecanografiado que especifico "target": "es6" en tsconfig.json . Esa es la causa raíz. Entonces, la solución es simplemente cambiar los dependientes nuevamente a es5 tsconfig.json:

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

Use Babel para transpilar esos módulos JS y podrá escribir sus pruebas con es6.

Instalar Babel / preset-env

npm i -D @babel/preset-env

Cree un archivo de configuración de babel con el preajuste

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