No pude deshacerme de este SyntaxError: Cannot use import statement outside a module sin importar lo que haya intentado y se volvió muy frustrante. ¿Hay alguien por aquí que haya resuelto este problema? He leído un millón de hilos de problemas de stackoverflow y github. Sin soluciones claras.
Este es un proyecto React, Typescript, Webpack. Estoy tratando de probar un módulo. Pero Jest no transformará el módulo en javascript simple de alguna manera.
/Users/me/dev/Project/project/node_modules/variables/src/variables.js:12 import './main.js'; ^^^^^^ SyntaxError: Cannot use import statement outside a module 17 | 18 | */ > 19 | import { GlobalVars } from 'variables' | ^ 20 | 21 | export const Vars = new GlobalVars() 22 | Usando la configuración de env en babel.config : env.test.preset: ['@babel/plugin-transform-modules-commonjs']
modificando la configuración de transform en la configuración de Jest como '^.+\\.jsx?$': 'babel-jest', '^.+\\.tsx?$': 'ts-jest' y todas las demás posibilidades en torno a esto.
En la configuración de Jest, testPathIgnorePatterns , transformIgnorePatterns
Usar .babel.config.js en lugar de .babelrc.js
...y más.
paquete.json
"jest": { "preset": "ts-jest", "testEnvironment": "node" }.babelrc.js
module.exports = { presets: [ ['@babel/preset-env', { targets: { node: 'current' } }], '@babel/preset-react', '@babel/preset-typescript', ], plugins: [ '@babel/plugin-transform-runtime', '@babel/proposal-class-properties', '@babel/transform-regenerator', '@babel/plugin-transform-template-literals', 'react-hot-loader/babel', ], }variables.ts
import { GlobalVars } from 'variables' export const Vars = new GlobalVars()variables.spec.ts
import { Vars } from './variables.ts' describe('Test The Package', () => { it('Should accept new variables', () => { Vars.newVariable = 'new variable' expect(Vars.newVariable).toEqual('new variable') }) })¿Alguna idea sobre cómo resolver este problema?
Dado que Jest no funciona bien con esmodules, debe agregar estas configuraciones en jest.config.js para decirle a Jest que use compilaciones commonJS en su lugar.
moduleNameMapper: { '^variables$': 'variables/dist/cjs', '^[NAME OF MODULE YOU WANT TO IMPORT]$': '[NAME OF MODULE YOU WANT TO IMPORT]/dist/cjs' }Me quedé atrapado en la misma situación. Debido a que tenía un paquete privado sin transpilar que se basa en TypeScript, y todos mis archivos de origen y de prueba se aplicaron con ECMA (sintaxis de importación), también encontré el siguiente error.
SyntaxError: no se puede usar la declaración de importación fuera de un módulo
Las soluciones que he probado.
jest.config.ts .node_modules , incluido el caché, y se los reinstaló.Después de todo, encontré ECMAScript Modules del documento oficial de JEST, los cuatro pasos resolvieron perfectamente mi problema. Pegué sus instrucciones aquí, sin embargo, debería echar un vistazo al documento en sí.
tl;dr : tsconfig.spec.json >
{ "compilerOptions": { "allowJs": true } }
Hizo todo lo demás mencionado aquí:
Luego depuré en el transformador. Primero pensé que me di cuenta: el espacio de trabajo preconfigurado no registra nada, ni siquiera en ts-jest.log, ni con --verbose o --debug y ni siquiera la advertencia, que habría sido:
Obtuve un archivo
.jspara compilar mientras que la opciónallowJsno está establecida entrue(archivo: {{ruta}}). Para arreglar esto:
- si desea que TypeScript procese archivos JS, establezca
allowJsentrueen su configuración de TypeScript (generalmente tsconfig.json)- si no desea que TypeScript procese sus archivos
.js, en su configuración de Jest cambie la clave detransformcuyo valor ests-jestpara que ya no coincida con los archivos.js
(ver: ts-jest-transformer.ts )
Una solución simple sería usar un ajuste preestablecido diferente en su archivo jest.config.js .
En lugar de usar el "preset": "ts-jest" , intente usar ajustes preestablecidos como "preset": "ts-jest/presets/js-with-ts" . Con base en la documentación , hará lo siguiente:
ts-jest/presets/js-con-ts
Los archivos TypeScript y JavaScript (.ts, .tsx, .js, .jsx) serán transformados por ts-jest a la sintaxis CommonJS. Deberá establecer allowJs en verdadero en su archivo tsconfig.json.
Otra forma de resolverlo es y posibles otros problemas posteriores con respecto a babel y mecanografiado es usar ts-jest , citado en el inicio de Jest
Sin embargo, hay algunas advertencias sobre el uso de TypeScript con Babel. Debido a que la compatibilidad con TypeScript en Babel es puramente transpilación, Jest no verificará el tipo de sus pruebas a medida que se ejecutan. Si lo desea, puede usar ts-jest en su lugar, o simplemente ejecutar el compilador de TypeScript tsc por separado (o como parte de su proceso de compilación).