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

11

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:

error de broma

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.

Logan Shoemaker
fuente
Para su información, me estaba encontrando con esto cuando configuré un TestSequencer personalizado para Jest y simplemente cambié a usar en requirelugar de import, solo para este archivo.
Joshua Pinter

Respuestas:

3

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.

Logan Shoemaker
fuente
0

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",
  }
};
Onur Özkan
fuente
0

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

readytohackk
fuente
0

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",
    ...
  },
  ...
}
Jianwu Chen
fuente
Que cambiaste
Nida Munir
1
Perdón por el error en mi publicación original. Estaba usando es6 en el módulo dependiente. Esa es la raíz del problema. Después de volver a cambiar a es5 , el problema está resuelto
Jianwu Chen
-1

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']}
Natan Williams
fuente