0
428
ViewsCó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 Create React App) creada con TypeScript, Jest, Webpack y Babel. Cuando intento ejecutar yarn jest , aparece el siguiente error:
He intentado eliminar todos los paquetes y volver a agregarlos. No resuelve esto. He mirado preguntas y documentación similares y todavía estoy malinterpretando algo. Fui tan lejos como para 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 explotaran. Parece solucionar el problema si solo uso las importaciones predeterminadas a través de mi solución, pero preferiría no seguir esa ruta.
3 answers
Answer question0
También usando Babel, Typescript y Jest. Tuve el mismo fallo, volviéndome loco durante horas. Terminé creando un nuevo archivo babel.config.js específicamente para las pruebas. Tenía un gran .babelrc que no estaba siendo recogido por broma sin importar lo que le hiciera. La aplicación principal todavía usa .babelrc ya que anula los archivos babel.config.js .
Instale jest, ts-jest y babel-jest:
npm i jest ts-jest babel-jest babel.config.js (solo usado por jest)
module.exports = {presets: ['@babel/preset-env']} jest.config.js
module.exports = { preset: 'ts-jest', transform: { '^.+\\.(ts|tsx)?$': 'ts-jest', "^.+\\.(js|jsx)$": "babel-jest", } }; package.json
"scripts": { "test": "jest"0
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 ajuste preestablecido
//babel.config.js module.exports = {presets: ['@babel/preset-env']}0
¡Resolví esto migrando el archivo .babelrc a babel.config.js ! Sorpresa desagradable.