Jest: Importación inesperada de tokens para módulos ES6

Tengo este mismo problema con React-Native y Jest,
Si comienza un nuevo proyecto con:
react-native init AwesomeProject
cd AwesomeProject

luego instale un módulo como npm install native-base --save
importar cualquier componente de la base nativa a su archivo index.ios.js

La prueba npm arrojará este error:
../test/node_modules/native-base/index.js:4
importar cajón de './Components/vendor/react-native-drawer';
^^^^^^
SyntaxError: importación de token inesperada

Ver http://facebook.github.io/jest/docs/tutorial-react-native.html#transformignorepatterns -customization

Tengo el mismo problema, el enlace que proporcionó @cpojer no parece ayudar 😕

¡Hola! 'transformIgnorePatterns' hace .... mmmm ... que debe hacer - ignorando)
Pero, ¿cómo puedo usar esa importación en el paquete desde node_modules?

Estos accesorios me ayudaron :)

{
  "jest": {
    "verbose": true,
    "moduleDirectories": ["node_modules", "src"]
  },
}

UPD1
Actualmente, mi configuración de Jest es:

"jest": {
    "verbose": true,
    "transform": {
      "^.+\\.js$": "babel-jest",
      "^.+\\.(css|scss|less)$": "jest-css-modules"
    },
    "globals": {
      "NODE_ENV": "test"
    },
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleDirectories": [
      "node_modules",
      "src/frontend",
      "src/shared"
    ]
  },

... y me está funcionando :)

Saludos cordiales, Pavel Tretyakov

Hola chicos, todavía tengo este problema, pero no estoy usando react native. El problema siempre se soluciona usando jest --no-cache. ¿Hay alguna manera de hacer que la broma funcione usando caché, sin arrojar este error?

No puedo hacer que esta transformación funcione con mi aplicación create-react-app. Obtenga siempre "Importación de token inesperada" en cualquier archivo de prueba que contenga la importación de ES6. Probé todas las sugerencias que pude encontrar. no-cache no tiene impacto. Obviamente, no puedo ignorar estos archivos de la transformación (¡necesitan ser transformados!).

Me rindo. Feliz de proporcionar cualquier información requerida.

Parece que también estoy experimentando este problema.

Aquí igual

Aquí igual

Es probable que todos se encuentren con este problema porque los módulos ES no son compatibles con Node y deliberadamente dejaste de compilarlos con tu canal de compilación (paquete web, paquete acumulativo) cuando los envías al navegador.

Debe habilitar la compilación de módulos ES a CommonJS para el entorno de "prueba" en su babelrc, consulte https://babeljs.io/docs/usage/babelrc/#env -option y https://babeljs.io/docs/ plugins / transform-es2015-modules-commonjs /

{
  "env": {
    "production": {
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  }
}

Gracias por tu respuesta, cpojer. Ayer eliminé la configuración de mi entorno de nodo y dejé que se ejecutara con el entorno de nodo predeterminado, porque jest estaba funcionando globalmente, pero no mientras usaba scripts de nodo. Parecía resolver el problema, así que creo que mi problema estaba en la configuración del entorno de nodo. Pero todavía es algo para monitorear.

EDITAR: Esto no funcionó en absoluto. La solución de @cpojer funcionó a las

La solución de @cpojer funcionó para mí, gracias

Impresionante, también funcionó para mí, ¡gracias!

Tengo un problema similar en mi aplicación nativa de reacción bastante simple.

Cuando se ejecuta npm test o jest esto se devuelve 'SyntaxError: Unexpected token import'

.babelrc

{
"presets": ["react-native"]
}

.package.json

{
  "name": "BeeAppy",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "babel-jest": "^20.0.3",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-native": "^2.0.0",
    "enzyme": "^2.8.2",
    "eslint": "^4.0.0",
    "eslint-plugin-react": "^7.1.0",
    "jest": "^20.0.4",
    "react-addons-test-utils": "^15.6.0",
    "react-dom": "^15.6.1",
    "react-test-renderer": "^16.0.0-alpha.6"
  },
  "scripts": {
    "start": "react-native start",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "test": "node node_modules/jest/bin/jest.js --watch"
  },
  "jest": {
    "preset": "react-native"
  },
  "dependencies": {
    "react": "16.0.0-alpha.6",
    "react-native": "^0.44.0",
    "react-navigation": "^1.0.0-beta.11"
  }
}

¿El fragmento de env sugerido por @cpojer va en .package.json?
¡Lo siento si es realmente obvio!
Cualquier ayuda sería genial, gracias

@JessicaBarclay debería ir en tu configuración .babelrc. Como esto:

"env": {
          "development": {
                 "plugins": ["transform-es2015-modules-commonjs"]
          }
}

Ahh ¡Gracias @rlage ! Ordenado :)

FWIW, en realidad tenía mi .babelrc configurado con los presets y plugins correctos bajo un entorno de prueba como NODE_ENV=test en mi línea de scripts en package.json .

Antes, fallaba con "Importación de token inesperada":

"scripts": {
  ...
  "test": "jest",
}

Después, transformando archivos con éxito:

"scripts": {
  ...
  "test": "NODE_ENV=test jest",
}

@jlyman

Basado en el documento de Jest, no debería ser necesario, ya que Jest establece el NODE_ENV para probar por defecto.

Nota: Si está utilizando una configuración de Babel más complicada, utilizando la opción env de Babel, tenga en cuenta que Jest definirá automáticamente NODE_ENV como prueba. No usará la sección de desarrollo como lo hace Babel por defecto cuando no se establece NODE_ENV.

Este .babelrc es lo que funcionó para mí:

{"env": {
    "development": {
        "plugins": ["transform-es2015-modules-commonjs"]
    },
    "test": {
        "plugins": ["transform-es2015-modules-commonjs"]
    }
}}

NOTA: parece extraño, pero tanto las claves de prueba deben estar presentes, de lo contrario no funcionará.

Entonces solo llamo:

node_modules/.bin/jest

o con package.json:

{"scripts": {"test": "jest"}}

No es necesario configurar NODE_ENV para probar.

@laszbalo Interesante, la presencia de ese segundo env parece hacer el truco. Si agrego un entorno de desarrollo y elimino el prefijo explícito NODE_ENV en mis scripts, funciona. También había leído esa parte de los documentos, pero terminé con esa solución ya que funcionó.

@jlyman ¿ qué solución en documentos?

@doudounannan Lo siento si eso no estaba claro. La solución con la que terminé fue la que publiqué aquí . Como dijo @laszbalo , va en contra de lo que dicen los documentos en Uso de Babel , pero la solución de @laszbalo o mi inyección directa de NODE_ENV test parecen funcionar.

Curiosamente, cuando uso "transformIgnorePatterns": [ ] entonces babel transforma mis archivos probados, pero si excluyo la opción transformIgnorePatterns , entonces babel no hace nada ... Tengo un .babelrc simple solo para probar (yo use el paquete web para la producción, pero no para las pruebas de broma):

{
  "env": {
    "test": {
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  }
}

Obtuve la idea de https://github.com/facebook/jest/issues/2550#issuecomment -290812720 ya que nada más en el # 770 o aquí parecía ayudar ...

No importa lo que haga, siempre es el mismo error:

    /.../node_modules/@expo/react-native-action-sheet/ActionSheet.ios.js:3
    import React from 'react';
    ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
      at Object.<anonymous> (node_modules/@expo/react-native-action-sheet/index.js:1:107)
      at Object.<anonymous> (node_modules/react-native-gifted-chat/src/GiftedChat.js:10:29)

{
  "env": {
    "production": {
      "plugins": ["transform-es2015-modules-commonjs"]
    },
    "development": {
      "plugins": ["transform-es2015-modules-commonjs"]
    },
    "test": {
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  },
  "presets": [
    "react-native"
  ],
  "plugins": [
    ["module-resolver", {
            "cwd": "babelrc",
        }]
  ]
}

"jest": {
    "preset": "react-native",
    "setupFiles": [
        "./__tests__/setup.js"
    ],
    "testRegex": "/__tests__/.*\\.spec\\.js$"
}

Tengo el mismo problema. Agregué lo siguiente a mi broma

"jest": {
     "preset": "react-native",
     "transformIgnorePatterns": [
          "node_modules/(?!react-native|react-navigation)/"
      ]
  }

y ahora aparece el siguiente error cuando ejecuto Jest:

ReferenceError: complemento desconocido "transform-replace-object-assign" especificado en "/Users/caalcaz/Documents/Projects/Enterprise-app/node_modules/enzyme/.babelrc" en 0, se intentó resolver en relación con "/ Users / caalcaz / Documentos / Proyectos / Aplicación empresarial / node_modules / enzima "

@calcazar, ¿qué hay en sus módulos_nodo / enzima / .babelrc?

Lo resolví usando babel-jest _and_ ts-jest. En package.json:

"jest": {
    "modulePaths": [
        "<rootDir>/src",
        "<rootDir>/node_modules"
    ],
    "globals": {
        "NODE_ENV": "test"
    },
    "verbose": true,
    "moduleFileExtensions": [
        "ts",
        "tsx",
        "js",
        "jsx",
        "json"
    ],
    "transform": {
        "^.+\\.jsx?$": "babel-jest",
        "^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
    },
    "transformIgnorePatterns": ["/node_modules/(?!lodash-es)"], // <-- this allows babel to load only the node modules I need (which is lodash-es) and ignore the rest
    "testRegex": "test/.*\\.spec\\.ts$",
    "setupFiles": [
        "<rootDir>/test/jest-pretest.ts"
    ],
    "testEnvironment": "node",
    "moduleNameMapper": {
        "aurelia-(.*)": "<rootDir>/node_modules/$1"
    },
    // some coverage and results processing options
},

Luego, en .babelrc (que solo uso para probar)

{
    "env": {
        "test": {
        "plugins": ["transform-es2015-modules-commonjs"]
        }
    }
}

espero que ayude a alguien! (Esto es para una aplicación de Aurelia, así que YMMV)

@thinkOfaNumber

Esto es lo que veo. como un FYI estoy ejecutando Enzyme V3.0

{
  "presets": ["airbnb"],
  "plugins": [
    ["transform-replace-object-assign", "object.assign"],
  ],
}

@thinkOfaNumber gracias por publicar su sugerencia. Lo usé para descubrir cómo obtener módulos es6 de una biblioteca externa para compilarlos en broma. La clave esta aqui

"jest": {
    "modulePaths": [
        "<rootDir>/src",
        "<rootDir>/node_modules"
    ],
    "transformIgnorePatterns": ["/node_modules/(?!lodash-es)"], // <-- this allows babel to load only the node modules I need (which is lodash-es) and ignore the rest

Esta es la parte que la necesito. ¡Muchas gracias!

@rochapablo en el mismo lugar. ¿Alguna suerte?

Noop, por ahora estoy ignorando la prueba de archivo específica que arroja el error

Siguiente. Tengo el mismo problema y nada hasta ahora parece resolverlo.

Siguiendo también

@rochapablo ¿Has logrado resolver este problema?
Tampoco puedo probar el componente que tiene GiftedChat como hijo debido al problema que mencionó ...

@todorone , intente agregar:

"transformIgnorePatterns": [
      "node_modules/(?!react-native-gifted-chat)/"
]

@rochapablo Gracias por la pista, pero desafortunadamente no ayudó. Incluso intenté jugar más con transformIgnorePatterns expresiones regulares pero no ayudó.

"transform": { "^.+\\.js$": "babel-jest", "^.+\\.jsx?$": "babel-jest" },
agregue lo anterior para bromear

@rochapablo ¿Has probado el preset jest-expo ? ¿Alguna suerte? Me encontré con otro problema de sintaxis con él & transformIgnorePatterns

Todavía no funciona para mí. Me sale el maldito error de importación.

@testacode que es un import dinámico, ¿ha agregado el complemento de babel necesario? Consulte la parte inferior de https://facebook.github.io/jest/docs/en/webpack.html#using -with-webpack-2

@SimenB gracias, ¡eso es lo que me faltaba!

Es interesante. Alguna actualización reciente eliminó la adición automática de babel-jest. Entonces corriendo:

npm install babel-jest --save-dev

y agregar NADA MÁS en la configuración solucionó el problema para mí. Creo que debería quedar más claro en un mensaje de error que ya no está incluido ...

Lo resolví simplemente instalando babel-jest:
npm i babel-jest

Además, no olvide crear un archivo .babelrc con el siguiente contenido:

{
    "presets": ["env", "react"]
}

Esto funciona para mi:

.babelrc :

{
    "presets": ["env", "stage-3"],
    "plugins": ["transform-class-properties"]
}

package.json :

"scripts": {
    "test": "jest --forceExit"
},
"devDependencies": {
    "babel-core": "^6.11.4",
    "babel-jest": "^21.2.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-3": "^6.24.1",
    "jest": "^21.2.0"
}

@hqro funcionó para mí, gracias 👍

Para mí, tenía esto en mi archivo .babelrc :

{
  "presets": ["react", ["env", { "modules": false }]],
  "plugins": [ ... ]
}

Y solo necesitaba asegurarme de que el entorno de "prueba" usara módulos en su lugar:

{
  "presets": ["react", ["env", { "modules": false }]],
  "plugins": [ ... ],
  "env": {
    "test": {
      "presets": ["react", "env"],
    }
  }
}

@nemoDreamer Es mejor no repetir complementos y ajustes preestablecidos en una configuración

{
  "presets": ["react", ["env", { "modules": false }]],
  "plugins": [ ... ],
  "env": {
    "test": {
      "plugins": ["transform-es2015-modules-commonjs"],
    }
  }
}

Sea lo que sea que intento, obtengo un error.

> cross-env NODE_ENV=test jest --no-cache

 FAIL  src\views\Pay\__tests__\Pay.test.js
  ● Test suite failed to run

    C:\Users\***\Documents\Project\***\node_modules\ne-rc\lib\index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import _Alert from './Alert';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token import

      11 |  * <strong i="6">@param</strong> {Array<Object>} [data] 每一种分期的详细信息 data=[{},{}...]
      12 |  * <strong i="7">@param</strong> {Number} [defaultSelected] 默认选中的下标
    > 13 |  * <strong i="8">@param</strong> {Funtion} [onClick] 点击触发事件
      14 |  * <strong i="9">@param</strong> {Number} [columnNum] 一行有多少列
      15 |  *
      16 |  * <strong i="10">@example</strong>

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:316:17)
      at Object.<anonymous> (src/components/Installment/Installment.jsx:13:13)
      at Object.<anonymous> (src/components/Installment/index.js:8:20)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        3.693s

Aquí están mis archivos de configuración.

* .babelrc *

{
  "presets": [
    [
      "env",
      {
        "modules": false
      }
    ],
    // webpack understands the native import syntax, and uses it for tree shaking

    "es2015",
    "stage-2",
    // Specifies what level of language features to doPay.

    // Stage 2 is "draft", 4 is finished, 0 is strawman.

    // See https://tc39.github.io/process-document/

    "react"
    // Transpile React components to JavaScript
  ],
  "env": {
    "test": {
      "presets": ["env", "react", "stage-2"],
      "plugins": [
        "transform-es2015-modules-commonjs"
      ]
    }
  }
}

package.json

{
  "main": "index.js",
  "scripts": {
    "dev": "cross-env NODE_ENV=development node ./server/server.js",
    "api": "cross-env NODE_ENV=api node ./server/server.js",
    "clean": "rm -rf dist",
    "dist": "npm run clean && cross-env NODE_ENV=production webpack --config ./webpack/index.js --progress --colors",
    "online": "cross-env NODE_ENV=development node ./server/online.js",
    "lint": "node ./node_modules/eslint/bin/eslint.js ./src --fix",
    "test": "cross-env NODE_ENV=test jest --no-cache",
    "test:watch": "npm test --watch",
    "stats": "npm run clean && cross-env NODE_ENV=production webpack --config ./webpack/index.js --profile --json > stats.json",
    "gatest": "node ./service/gatest.js"
  },
  "pre-commit": [
    "lint"
  ],
  "jest": {
    "verbose": true,
    "modulePaths": [
      "<rootDir>/src",
      "<rootDir>/node_modules"
    ],
    "setupFiles": [
      "./test/setup.js"
    ],
    "moduleFileExtensions": [
      "js",
      "jsx",
      "json",
      "md"
    ],
    "moduleDirectories": [
      "node_modules"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
    ],
    "transform": {
      "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "testEnvironment": "jsdom"
  },
  "devDependencies": {
    "asset-inject-html-webpack-plugin": "^0.9.1",
    "autoprefixer": "^7.1.3",
    "babel": "^6.23.0",
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.2.1",
    "babel-jest": "^22.4.1",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-jest": "^22.4.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "babel-register": "^6.26.0",
    "better-npm-run": "0.1.0",
    "body-parser": "^1.17.2",
    "chalk": "^2.1.0",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.5",
    "deepmerge": "^2.0.1",
    "enzyme": "^3.3.0",
    "eslint": "^4.5.0",
    "eslint-config-standard": "^11.0.0-beta.0",
    "eslint-config-standard-jsx": "^4.0.2",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-node": "^5.1.1",
    "eslint-plugin-promise": "^3.5.0",
    "eslint-plugin-react": "^7.3.0",
    "eslint-plugin-standard": "^3.0.1",
    "exports-loader": "^0.6.4",
    "express": "^4.15.4",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.6",
    "git-repo-info": "^1.4.1",
    "glob": "^7.1.2",
    "happypack": "^4.0.1",
    "html-loader": "^0.5.1",
    "html-webpack-plugin": "^2.30.1",
    "idb": "^2.0.4",
    "imports-loader": "^0.7.0",
    "jest": "^22.4.2",
    "lodash.range": "^3.2.0",
    "mocha": "^5.0.0",
    "node-sass": "^4.5.3",
    "node-xlsx": "^0.11.2",
    "postcss-loader": "^2.0.6",
    "pre-commit": "^1.2.2",
    "react-hot-loader": "^3.0.0-beta.6",
    "react-test-renderer": "^16.2.0",
    "redux-logger": "^3.0.6",
    "regenerator-runtime": "^0.11.1",
    "request": "^2.74.0",
    "require-reload": "^0.2.2",
    "rimraf": "^2.6.0",
    "sass-loader": "^6.0.6",
    "script-loader": "^0.7.0",
    "sinon": "^4.2.0",
    "style-loader": "^0.19.1",
    "uglify-js": "^3.0.28",
    "url-loader": "^0.6.2",
    "webpack": "^3.5.5",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-middleware": "^2.0.4",
    "webpack-dev-server": "^2.7.1",
    "webpack-hot-middleware": "^2.18.2",
    "webpack-merge": "^4.1.0",
    "worker-loader": "^1.1.0"
  }
}

@kisnows https://stackoverflow.com/questions/46065371/reactjest-syntaxerror-unexpected-token-import
https://segmentfault.com/n/1330000012786721

Al configurar el ajuste preestablecido en .babelrc , asegúrese de que "env" esté entre corchetes ["env"] , así:

  "env": {
    "test": {
      "presets": [["env"], "stage-2"],
      "plugins": ["transform-es2015-modules-commonjs", "dynamic-import-node"]
    }
  }

especialmente si tiene "modules: false" en su configuración.

Además, de forma predeterminada, jest NO transforma archivos en node_modules , cf https://facebook.github.io/jest/docs/en/configuration.html#transformignorepatterns -array-string

Es por eso que cualquier import ... no funcionará en archivos node_modules . Para deshabilitar esto, puede agregar:

transformIgnorePatterns: []

a su configuración de broma.

¡Espero que esto ayude!

@florentchauveau Gracias, este trabajo para mí.

@todorone @rochapablo ¿

    import * as React from 'react';
    ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:316:17)
      at Object.<anonymous> (node_modules/@expo/react-native-action-sheet/index.js:1:107)

Recibo este error solo en las pruebas de los componentes que usan
GiftedChat - https://github.com/FaridSafi/react-native-gifted-chat.
¿Quizás esto se deba a que @expo/react-native-action-sheet se envía como un módulo ES6 y GiftedChat lo usa internamente? Pero jest / ts-jest (no estoy seguro) debería manejar eso si se agregan los ajustes preestablecidos. Aquí está mi configuración de Jest:

    "jest": {
        "preset": "react-native",
        "moduleFileExtensions": [
            "ts",
            "tsx",
            "js"
        ],
        "transform": {
            "^.+\\.(js)$": "<rootDir>/node_modules/babel-jest",
            "\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
        },
        "transformIgnorePatterns": [
            "node_modules/(?!rn-placeholder|react-native|react-navigation|native-base|react-native-datepicker|native-base-shoutem-theme|@shoutem/animation|@shoutem/ui|tcomb-form-native)"
        ],
        "setupTestFrameworkScriptFile": "<rootDir>/src/__mocks__/Adapter.js",
        "testRegex": "(\\.(test|spec))\\.(ts|tsx|js)$",
        "testPathIgnorePatterns": [
            "\\.snap$",
            "<rootDir>/node_modules/",
            "<rootDir>/lib/"
        ],
        "moduleNameMapper": {
            "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/__mocks__/fileMock.js"
        },
        "cacheDirectory": ".jest/cache"
    },

y el .babelrc -

{
    "presets": ["react-native"]
}

Probé casi todas las soluciones mencionadas anteriormente. Ninguno de ellos funcionó en mi escenario. Se necesita ayuda.

@ omkarjoshi-cc lo único que me funcionó en el momento en que estaba trabajando fue agregar el paquete que estaba disparando el error, que en mi caso fue:

"transformIgnorePatterns": [
      "node_modules/(?!react-native-gifted-chat)/"
]

@rochapablo Sí. Lo intenté. No funcionó. ¿Hay alguna otra cosa que se esté perdiendo? Esto es realmente frustrante 😓

Estoy usando babel 7 y yo tampoco tuve suerte con "transformIgnorePatterns" - probé muchas expresiones regulares diferentes: /

El problema que tengo es que una dependencia tiene clases nativas es6 y tengo una clase en mi fuente que la amplía. Dado que las "clases es5" transpiladas por Babel no pueden extender una clase nativa, obtengo un error de tiempo de ejecución en broma.

Empecé a pensar que de alguna manera "babel / preset-env" se está interponiendo en la forma en que el código se transpila a jest (nodo de destino), que podría no seguir los objetivos del navegador, pero aún no estoy seguro de eso.

¿Alguien sabe cómo forzar todo a es5 por broma cuando se usa 'present-env' en .babelrc?

La única solución que puedo pensar es no usar babel-jest, ejecutar el paquete web (que usa babel-loader, y las reglas a qué archivos transformar funcionaron para mí), luego ejecutar jest -> Estoy pensando en usar webpack -w y bromeo mira el transpilado ..)

Añadiendo

"transformIgnorePatterns": [
      "node_modules/(?!react-native-gifted-chat|@expo/react-native-action-sheet)"
]

trabajó para mi. Gracias a @rochapablo 🙌

Estoy luchando con este problema. ¿Mi carpeta de salida que se está probando debe ser la sintaxis ES6 con import etc. o no puedo probar eso? No veo ningún commonjs en mi archivo / archivos de salida (usándolo con react-native)

estoy enfrentando el mismo problema y esta página resuelve el problema:
https://babeljs.io/docs/plugins/transform-es2015-modules-commonjs/

Por alguna razón, en lugar de babel-jest , usar lo siguiente hizo que me funcionara (respeta el transformIgnorePatterns aparentemente)

"transform": {
      "^.+\\.(js|jsx|ts|tsx)$": "ts-jest-babel-7"
    }

Por cierto, este problema debería volver a abrirse aquí, ¿verdad? muchas personas que enfrentan dificultades

En mi caso, resulta que este problema fue causado por ignorar los archivos de prueba en mi configuración de babel. Por razones no relacionadas, tenía "ignore": ["**/*.test.js"] en mi .babelrc.

La solución fue establecer solo la opción ignorar para el entorno de producción, es decir:

"env": {
    "production": {
      "ignore": [
        "**/*.test.js"
      ]
    }
  }

Alternativamente, puede especificar un patrón de ignorar especial para el entorno de prueba.

Después de probar mucho, aquí está mi caso.

1. Asegúrate de tener las versiones correctas de babe-jest *
2. asegúrese de tener la configuración .babelrc con ajustes preestablecidos (previamente instalados)
3. Si aún se produce el error de "token inesperado", tal vez no se reconozcan las funciones de flecha, este complemento de babel lo ayudará a "transform-class-properties" también a incluirlas en su configuración de babel.

aquí están mis configuraciones.

.babelrc

{
  "plugins": [
    "transform-es2015-modules-commonjs",
    "transform-class-properties"
  ]}

para enzima (setupTests.js)

import { configure } from "enzyme";
import Adapter from "enzyme-adapter-react-15";
configure({ adapter: new Adapter() });

package.json

 "dependencies": {
    "babel-cli": "^6.26.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "eslint": "^4.19.1",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-test-renderer": "^15.6.2",
     "babel-jest": "^22.4.3",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-15": "^1.0.5",
    "gh-pages": "^0.12.0",
    "jest": "^22.4.3",
    "react-addons-test-utils": "^15.4.2",
    "regenerator-runtime": "^0.11.1"
  },
"jest": {
    "globals": {
      "NODE_ENV": "test"
    },
    "verbose": true,
    "moduleDirectories": ["node_modules", "src"],
    "transform": {
      "^.+\\.jsx?$": "babel-jest"
    },
    "moduleFileExtensions": ["js", "jsx"],
    "setupTestFrameworkScriptFile": "<rootDir>/src/setupTests.js"
  }

yarn add --dev babel-jest babel-core regenerator-runtime agregar esto funcionó para mí

En mi caso, fue un problema con Windows y sus estúpidos permisos, probablemente no configurando correctamente las variables env.
Cambió de git bash a un cmd.exe elevado y comenzó a trabajar de nuevo.

Tengo jest definido como script (renombrado test:jest como test ), en mi package.json . Sin embargo, al ejecutar npm run test , obtengo SyntaxError: Unexpected token import :

root<strong i="14">@browserify</strong>:/var/machine-learning/src# npm run test

> [email protected] test /var/machine-learning/src
> jest --config /var/machine-learning/test/jest/jest.config.js

 FAIL  ../test/jest/__tests__/layout/analysis.test.jsx
  ● Test suite failed to run

    /var/machine-learning/test/jest/__tests__/layout/analysis.test.jsx:6
    import React from 'react';
    ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (../../src/node_modules/jest-runtime/build/script_transformer.js:316:17)

 FAIL  ../test/jest/__tests__/layout/page.test.jsx
  ● Test suite failed to run

    /var/machine-learning/test/jest/__tests__/layout/page.test.jsx:6
    import React from 'react';
    ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (../../src/node_modules/jest-runtime/build/script_transformer.js:316:17)

 FAIL  ../test/jest/__tests__/content/register.test.jsx
  ● Test suite failed to run

    /var/machine-learning/test/jest/__tests__/content/register.test.jsx:6
    import React from 'react';
    ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (../../src/node_modules/jest-runtime/build/script_transformer.js:316:17)

 FAIL  ../test/jest/__tests__/content/login.test.jsx
  ● Test suite failed to run

    /var/machine-learning/test/jest/__tests__/content/login.test.jsx:6
    import React from 'react';
    ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (../../src/node_modules/jest-runtime/build/script_transformer.js:316:17)

----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |        0 |        0 |        0 |        0 |                   |
----------|----------|----------|----------|----------|-------------------|
Test Suites: 4 failed, 4 total
Tests:       0 total
Snapshots:   0 total
Time:        3.782s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] test: `jest --config /var/machine-learning/test/jest/jest.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2018-05-08T01_50_42_754Z-debug.log

También definí un jest.config.js :

module.exports = {
  'verbose': true,
  'collectCoverage': true,
  'coverageDirectory': '/var/machine-learning',
  'moduleDirectories': ['/var/machine-learning/src/node_modules'],
  'transformIgnorePatterns': [
    '/var/machine-learning/src/node_modules'
  ]
}

Veo muchas cosas sobre react-native y transformIgnorePatterns . Afortunadamente, y desafortunadamente, no lo uso. Qué error escurridizo es este. ¿Necesito definir .babelrc , o agregar una directiva jest en mi package.json ? ¿Cómo sabe mi broma script acerca de babel, si este es el caso? Intenté agregar un .babelrc , en el mismo directorio que contiene mi package.json , sin suerte:

{
  "env": {
    "test": {
      "presets": ["env", "stage-2", "react"]
    }
  }
}

Nota: si alguien quiere hacer un seguimiento de mi problema original con respecto al problema anterior.

Después de muchas tonterías, encontré los siguientes problemas:

• Jest ejecuta babel 6 de forma predeterminada. Babel 6 no busca un archivo .babelrc.js . Solo para un archivo .babelrc . Si tiene una configuración de JS en lugar de JSON, no leerá la configuración y, por lo tanto, no usará ningún complemento. Esto resultó en unexpected token: import para mí.
• babel-7-jest ejecuta en un antiguo motor principal de Babel 7, lo que rompe el soporte para complementos de propuesta más nuevos.
• Parece que npm i -D [email protected] SOLUCIONA EL PROBLEMA COMPLETAMENTE . Ni siquiera tengo env.test en mi configuración de babel, ni tengo ninguna configuración de broma.

Parece que Jest busca babel-core (y por lo tanto ignora @babel/core ), de lo contrario recurre a Babel 6 y omite su configuración. Pero cuando se instala el último babel-core (versión puente), analiza los módulos ES6 sin ninguna configuración adicional.

¡Gracias kasvtv! Cambié mi .babelrc.js a .babelrc e instalé npm i -D [email protected] . Ahora mis pruebas se ejecutan con babel-jest

Puede utilizar de forma segura un archivo de configuración .js. Es solo que Babel solo lee este tipo de archivo a partir de la versión 7 y necesita [email protected] para que Jest use la versión 7 de Babel.

Si alguien está interesado, hice funcionar mis pruebas de jest + enzima. Siéntase libre de hurgar en los archivos de

Tuve un problema similar debido a que las bibliotecas antd y rc-calendar etc. no pudieron importar módulos, la solución fue configurar transformIgnorePatterns

transformIgnorePatterns: [ 'node_modules/?!(antd|rc-.+)/' ],

Quizás moduleDirectories ayudó:

moduleDirectories: ['node_modules'],

Actualicé a la última versión nativa de reacción y tuve que actualizar a babel 7 y ahora aparece el mismo error.

Agregar estos node_modules en transformIgnorePatterns ya no parece hacer nada.

En mi caso, es porque ya no estoy transpilando módulos con Babel, y hay una nota en la guía de introducción sobre cómo agregar eso nuevamente a la porción test de su babelrc.

@kasvtv @ willb335 Utilizo un truco para que Babel 6 reconozca .babelrc.js:

package.json

  "babel": {
    "presets": [
      "./.babelrc.js"
    ]
  },

Encuentro el mismo problema con use @ material / base library, ¿alguien podría proporcionar package.json & .babelrc archivo para resolver? Intenté los comentarios anteriores, pero me equivoqué ...

la solución para mí fue agregar el ajuste preestablecido "env" en el archivo .babelrc, por lo que resultó así
{
"presets": ["env", "es2016", "stage-0", "react"]
}

El uso de esta información de enlace resolvió mi problema
https://jestjs.io/docs/en/webpack.html

@negarineh tu enlace no funciona

El uso de la solución transformIgnorePatterns proporcionada por @haywirez convierte mi

SyntaxError: Unexpected token import

error en un

TypeError: Cannot read property 'DocumentDir' of undefined

error. Es decir, el paquete (rn-fetch-blob) ahora no está definido.

Editar:

en realidad, simplemente agregar transformIgnorePatterns: [], a mi jest.config.js hace que SyntaxError cambie al TypeError.

@schumannd Lo siento, cometí un error, el enlace te redirige a la página ahora. Si configura su "jest.config.js" con la configuración que se proporciona en el enlace, debería funcionar.
Si el error se trata de importar un archivo .css, agregar un archivo simulado como el ejemplo en el enlace o simplemente instalar "identity-obj-proxy" con esta configuración debería funcionar:

npm install --save-dev identity-obj-proxy

jest.config.js (para módulos CSS):

{ "jest": { "moduleNameMapper": { "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js", "\\.(css|less)$": "identity-obj-proxy" } } }

Además, este es mi archivo .babelrc en el directorio raíz del proyecto (test.config.js también debería estar en la raíz):

Primero, para usar babel, instale "babel-jest" y "regenerator-runtime":

npm --dev babel-jest babel-core regenerator-runtime

Luego agregue esta configuración al archivo .babelrc:

{ "presets": ["env", "react"], "plugins": ["transform-class-properties"], "env": { "production": { "plugins": ["transform-es2015-modules-commonjs"] }, "test": { "presets": ["env", "react"], "plugins": ["transform-export-extensions"], "only": [ "./**/*.js", "node_modules/jest-runtime" ] } } }

Espero que esto ayude.
https://jestjs.io/docs/en/webpack.html

En mi caso, funciona después de agregar lo siguiente .babelrc

{
  "presets": ["env", "react"],
  "env": {
    "test": {
      "plugins": ["transform-class-properties"]
    }
  }
}

y luego ejecute la prueba usando NODE_ENV=test jest

Esto solo ayudará a ALGUNAS personas.

Mi problema se debió a que broma no pudo analizar mi archivo JS. Usé require lugar.

Tipo. Ninguna de estas soluciones funciona porque no tengo un archivo babelrc ... solo babel.config.js. Por favor, ¿cómo se arregla con babel.config.js? Gracias

Intenté muchas cosas de la discusión anterior con las configuraciones de babel , así como algunas opciones adicionales de otras búsquedas (como esm opciones); nada funcionó. La palabra clave de importación siguió dando error de broma. Es triste que probar un módulo con importaciones de es6 sea tan difícil.

Finalmente esto es lo que funcionó para mí: ts-jest

Ahora, no estoy usando ningún mecanografiado en mi código como tal, pero usé el ts-jest todos modos (ya que el mecanografiado internamente tiene soporte para importaciones y todas las demás cosas). Esto es solo para que la broma entienda el código javascript correctamente.

Siguió estos pasos:
npm i -D jest typescript ts-jest @types/jest
En el archivo jest.config.js :
transform: { "\\.js$": "ts-jest", transformIgnorePatterns: [], },
Jest puede quejarse de que el mecanografiado no permite que se cumplan los archivos js . Agregue el archivo tsconfig.json con las siguientes opciones:
{ "compilerOptions": { "allowJs": true, "module": "commonjs", "noImplicitAny": true, "removeComments": true, "preserveConstEnums": true, "sourceMap": true } }
Se eliminaron todas las configuraciones y archivos relacionados con babel . La configuración npm ve a continuación:
"scripts": { "test": "jest --runInBand --detectOpenHandles --no-cache --config ./jest.config.js" }
Espero que esto ayude a cualquiera que se enfrente a un problema similar con las importaciones.

¿Alguien tiene un repositorio básico que tenga una configuración que funcione utilizando importaciones de JS?

¿Alguien tiene un repositorio básico que tenga una configuración que funcione utilizando importaciones de JS?

https://github.com/kasvtv/react-starter

Como alguien que encontró esta página mientras buscaba un tema similar que probablemente sea irrelevante para la discusión original. Mi problema terminó debido al uso de importaciones dinámicas similares a funciones descritas por https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Dynamic_Imports. Esto terminó por resolverse agregando el complemento de babel para esta función disponible en https://github.com/airbnb/babel-plugin-dynamic-import-node y modificando el .babelrc en consecuencia.

{
    ...
    "env": {
        "test": {
            "plugins": ["dynamic-import-node"]
        }
    ...
}

simplemente elimino la opción: { módulo: falso }, y luego funciona

"presets": [
    ["@babel/env", {module: false} ],  
    "@babel/preset-react",
    "@babel/preset-typescript"
  ]

agregar transformIgnorePatterns: [] a la configuración de jest y transform-es2015-modules-commonjs a babelrc resolvió el problema por mí.
broma: ^ 23.1.0,
babel: 6.26.3

@ngmgit pero esto significa que transpila todos sus node_modules, lo cual no es muy óptimo ...

En mi caso,
.babelrc no funciona, pero resolví el problema moviendo la misma configuración en .babelrc a babel.config.js .

espero que haya ayudado!

Nada de TODO lo que está aquí funciona para mí. No puedo creer que la biblioteca de pruebas oficial de Facebook para probar aplicaciones React sea tan difícil de configurar, soy un desarrollador con más de 8 años de experiencia y pasé 5 horas de mi día sin éxito pasando por tantos problemas y preguntas en desbordamiento de pila.

simplemente no puedo configurar mi aplicación de reacción para trabajar con jest + react-testing-library

esto es SOLO porque broma me grita cada vez un nuevo error de sintaxis que no puede procesar. Cada complemento que uso resuelve un problema y le doy otro. ¿Hay forma de hacer que Babel se encargue de todo?

Sinceramente, terminé con eso, realmente me di por vencido, ya no voy a dedicar más tiempo a eso, probablemente cancelaré la adición de esta biblioteca al proyecto.

En serio, es muy extraño ver que NO hay una configuración predeterminada para NADIE que quiera probar una aplicación de reacción usando jest + react-testing-library.

después de horas de prueba y error con muchas respuestas SO y problemas de github , ¡la respuesta de

ACTUALIZADO con lo último y lo mejor con un contexto adicional que me ayudó:

babel.config.js

module.exports = {
  "env": {
    "production": {
-      "plugins": ["transform-es2015-modules-commonjs"]
# new kid on the block
+      "plugins": ["@babel/plugin-transform-modules-commonjs"]
    }
  }
}

jest.config.js

module.exports = {
  // if you're also using typescript
  preset: "ts-jest",
  testEnvironment: "node",
  verbose: true,
  // registers babel.config.js with jest
  transform: {
    "^.+\\.js$": "babel-jest",
  },
  // explicitly include any node libs using ESM modules
  transformIgnorePatterns: ["node_modules/?!(<ESM module here>|<another here>|<etc...>)"],
}

Dependencias:

• babel-jest
• @babel/plugin-transform-modules-commonjs
• ts-jest (para texto mecanografiado)

Este problema también puede ocurrir cuando no se ejecuta Jest en el directorio raíz del proyecto ...

Si está utilizando react-native o jest-expo presets y tiene .js archivos en su proyecto, debe configurar transform para que coincida con la configuración de broma.
Usé una expresión de https://jestjs.io/docs/en/configuration.html#transform -objectstring-pathtotransformer - pathtotransformer-object y funcionó.

transform: { '^.+\\.[jt]sx?$': 'babel-jest' }

soporte pnpm

Quiero dejar una nota aquí para los usuarios de pnpm ...

El siguiente ejemplo no funciona para los usuarios de pnpm porque las rutas de pnpm son diferentes. Las expresiones regulares anteriores solo funcionan con directorios node_modules aplanados.

/xxx/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/antd/es/input/String

Ver: https://regexr.com/5cs2h

"transformIgnorePatterns": [
  "node_modules/(?!(react-native|my-project|react-native-button)/)"
]

https://jestjs.io/docs/en/tutorial-react-native#transformignorepatterns -customization

Reparar

Use una anticipación negativa para la última ocurrencia agregando .* .

node_modules/(?!(.*antd/es)/)