Jest: Jest encontró un token inesperado con la aplicación React

Creado en 31 ago. 2018  ·  42Comentarios  ·  Fuente: facebook/jest

¿Amor broma? Considere apoyar a nuestro colectivo: 👉 https://opencollective.com/jest/donate

🐛 Informe de error

Cuando intento ejecutar pruebas con Jest en una aplicación React, obtengo un error Jest encountered an unexpected token . Copié el componente Link y lo probé directamente desde aquí . Este es el error:

FAIL  src/components/Link.test.js
  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    SyntaxError: C:\workspace\react\testapp\src\components\Link.test.js: Unexpected token (8:4)

       6 | test('Link changes the class when hovered', () => {
       7 |   const component = renderer.create(
    >  8 |     <Link page="http://www.facebook.com">Facebook</Link>,
         |     ^
       9 |   );
      10 |   let tree = component.toJSON();
      11 |   expect(tree).toMatchSnapshot();

      at Parser.raise (node_modules/@babel/parser/lib/index.js:3938:15)
      at Parser.unexpected (node_modules/@babel/parser/lib/index.js:5247:16)
      at Parser.parseExprAtom (node_modules/@babel/parser/lib/index.js:6327:20)
      at Parser.parseExprSubscripts (node_modules/@babel/parser/lib/index.js:5923:21)
      at Parser.parseMaybeUnary (node_modules/@babel/parser/lib/index.js:5902:21)
      at Parser.parseExprOps (node_modules/@babel/parser/lib/index.js:5811:21)
      at Parser.parseMaybeConditional (node_modules/@babel/parser/lib/index.js:5783:21)
      at Parser.parseMaybeAssign (node_modules/@babel/parser/lib/index.js:5730:21)
      at Parser.parseExprListItem (node_modules/@babel/parser/lib/index.js:6994:18)
      at Parser.parseCallExpressionArguments (node_modules/@babel/parser/lib/index.js:6123:22)

Aquí está mi package.json

{
  "name": "testapp",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server --config ./config/webpack.config.development.js",
    "build": "webpack -p --config ./config/webpack.config.production.js",
    "test": "jest"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "moment": "^2.22.2",
    "polished": "^2.0.3",
    "prop-types": "^15.6.2",
    "react": "^16.4.2",
    "react-delay-render": "^0.1.2",
    "react-dom": "^16.4.2",
    "react-imported-component": "^4.6.2",
    "react-router-dom": "^4.3.1",
    "simple-grid": "^1.0.1",
    "styled-components": "^3.4.5",
    "uuid": "^3.3.2",
    "validator": "^10.7.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "^23.4.2",
    "babel-loader": "^8.0.0",
    "babel-plugin-styled-components": "^1.6.0",
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "jest": "^23.5.0",
    "mini-css-extract-plugin": "^0.4.2",
    "react-test-renderer": "^16.4.2",
    "regenerator-runtime": "^0.12.1",
    "style-loader": "^0.23.0",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.7"
  }
}

Aquí está mi archivo .babelrc (ubicado en el directorio raíz):

{
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "babel-plugin-styled-components",
    "@babel/plugin-syntax-dynamic-import"
  ],
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "env": {
    "development": {
      "plugins": [
        "@babel/plugin-proposal-class-properties",
        ["babel-plugin-styled-components", { "displayName": true }],
        "@babel/plugin-syntax-dynamic-import"
      ],
      "presets": ["@babel/preset-env", "@babel/preset-react"]
    },
    "test": {
      "plugins": [
        "@babel/plugin-proposal-class-properties",
        ["babel-plugin-styled-components", { "displayName": true }],
        "@babel/plugin-syntax-dynamic-import"
      ],
      "presets": ["@babel/preset-env", "@babel/preset-react"]
    },
    "production": {
      "plugins": [
        "@babel/plugin-proposal-class-properties",
        "babel-plugin-styled-components",
        "@babel/plugin-syntax-dynamic-import"
      ],
      "presets": ["@babel/preset-env", "@babel/preset-react"]
    }
  }
}

Reproducir

Pasos para reproducir el comportamiento:

  • Instalar Jest con yarn add --dev babel-jest babel-core@^7.0.0-0 @babel/core
  • Crea una prueba
  • Ejecutar yarn test

Comportamiento esperado

  • Broma debería funcionar

Ejecutar npx envinfo --preset jest

Pega los resultados aquí:

OS: Windows 10
    CPU: x64 Intel(R) Xeon(R) CPU E3-1505M v6 @ 3.00GHz
  Binaries:
    Yarn: 1.5.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 5.6.0 - C:\Program Files\nodejs\npm.CMD

Comentario más útil

Después de 3 días, descubro las soluciones para este problema.
Hay 2 soluciones para esto:

Solución 1:

Puede cambiar el nombre de su archivo de .babelrc a babel.config.js , y esto funcionará.

## Solución 2:
Estoy usando de esta manera.
Crea un archivo de transformación como este (el mío es jest-transforme.js ):

const config = {
  babelrc: false,
  presets: [
    [
      "@babel/env",
      {
        modules: false
      }
    ],
    "@babel/react"
  ],
  plugins: [
    ["@babel/plugin-proposal-decorators", { legacy: true }],
    ["@babel/plugin-proposal-class-properties", { loose: true }],
    "transform-es2015-modules-commonjs"
  ]
};
module.exports = require("babel-jest").createTransformer(config);

Aquí está mi jest.config.js :

module.exports = {
  collectCoverageFrom: ["src/**/*.{js,jsx,mjs}"],
  testMatch: ["<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}", "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"],
  transform: {
    "^.+\\.(js|jsx|mjs)$": "<rootDir>/config/jest/jest-transformer.js"
  },
  transformIgnorePatterns: ["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"]
};

Y mi todavía tengo mi .babelrc
''
entornos const = require ("./ env-config.js");

module.exports = {
Preajustes: [
[
"siguiente / babel",
{
"preset-env": {
useBuiltIns: "entrada"
}
}
]
],
complementos: [
["styled-components", {ssr: true, displayName: true, preprocess: false}],
[
"módulo de resolución",
{
raíz: ["./"]
}
]
],
env: {
dev: {
complementos: [
["transform-define", entornos],
["módulo-solucionador", {root: ["./"]}],
"transform-decorators-legacy",
"propiedades de clase de transformación"
]
},
construir: {
complementos: [
["transform-define", entornos],
["módulo-solucionador", {root: ["./"]}],
"transform-decorators-legacy",
"propiedades de clase de transformación"
]
},
producción: {
Preajustes: [
[
"minify", // por qué agregar minify aquí, ejecutamos uglify en todos los paquetes de código
{
mangle: falso,
evaluar: falso
}
]
],
complementos: [
["transform-define", entornos],
["@ babel / plugin-proposition-decorators", {legacy: true}],
["@ babel / complemento-propuesta-clase-propiedades", {suelto: verdadero}],
["módulo-solucionador", {root: ["./"]}]
],
comentarios: falso,
compacto: cierto,
minificado: verdadero
}
}
};
`` ``
Espero que esto pueda hacer que ustedes pasen este problema. Alegría.

Todos 42 comentarios

Yo también tengo el mismo problema.

El mismo problema aqui.

mismo problema aquí .. un poco más complicado ya que estoy trabajando con un monorepo.

@fabioSalimbeni @hoaiduyit @mikedloss Hice que mis pruebas React y React Native ( Jest y enzyme ) pasen en un monorepo de Lerna usando Babel 7.

Necesita usar la nueva configuración de Babel con babel.config.js si está trabajando en un monorepo: https://babeljs.io/docs/en/v7-migration.

Este es mi babel.config.js para la raíz del monorepo:

module.exports = {
    overrides: [
        {
            test: 'platforms/webApp1',
            extends: 'platforms/webApp1/babel.config.js'
        },
        {
            test: 'platforms/webApp2',
            extends: 'platforms/webApp2/babel.config.js'
        }
    ]
};

Así es como se ve mi babel.config.js para webApp1 una de las aplicaciones de monorepo:

module.exports = {
    env: {
        test: {
            presets: [
                [
                    '@babel/preset-env',
                    {
                        modules: 'commonjs',
                        debug: false
                    }
                ],
                '@babel/preset-flow',
                '@babel/preset-react'
            ],
            plugins: [
                '@babel/plugin-syntax-dynamic-import',
                '@babel/plugin-proposal-class-properties'
            ]
        },
        production: {
            presets: [
                ['@babel/preset-env', { modules: false }],
                '@babel/preset-flow',
                '@babel/preset-react'
            ],
            plugins: [
                '@babel/plugin-syntax-dynamic-import',
                '@babel/plugin-proposal-class-properties'
            ]
        },
        development: {
            presets: [
                ['@babel/preset-env', { modules: false }],
                '@babel/preset-flow',
                '@babel/preset-react'
            ],
            plugins: [
                '@babel/plugin-syntax-dynamic-import',
                '@babel/plugin-proposal-class-properties'
            ]
        }
    }
};

Y esta es la configuración de Jest:

    "jest": {
        "verbose": true,
        "clearMocks": true,
        "collectCoverage": true,
        "setupTestFrameworkScriptFile": "<rootDir>/config/setupTest.js",
        "transform": {
            "^.+\\.js$": "babel-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|scss)$": "<rootDir>/__mocks__/styleMock.js"
        }
    }

setupTest.js ve así:

const Enzyme = require('enzyme');
const Adapter = require('enzyme-adapter-react-16');

Enzyme.configure({ adapter: new Adapter() });

fileMocks.js ve así:

module.exports = 'i-am-a-stubbed-file';

styleMocks.js ve así:

module.exports = {};

También deberá agregar algunos complementos de Babel y la versión babel-core como devDependencies en el package.json de cada aplicación:

        ...
        "@babel/cli": "^7.0.0",
        "@babel/core": "^7.0.0",
        "@babel/plugin-proposal-class-properties": "^7.0.0",
        "@babel/plugin-syntax-dynamic-import": "^7.0.0",
        "@babel/preset-env": "^7.0.0",
        "@babel/preset-flow": "^7.0.0",
        "@babel/preset-react": "^7.0.0",
        "babel-core": "7.0.0-bridge.0",
        "babel-eslint": "^9.0.0",
        "babel-jest": "^23.4.2",
        "babel-loader": "^8.0.2",
        ...
        "jest": "^23.5.0",
        "jest-cli": "^23.5.0",
        ...

Después de 3 días, descubro las soluciones para este problema.
Hay 2 soluciones para esto:

Solución 1:

Puede cambiar el nombre de su archivo de .babelrc a babel.config.js , y esto funcionará.

## Solución 2:
Estoy usando de esta manera.
Crea un archivo de transformación como este (el mío es jest-transforme.js ):

const config = {
  babelrc: false,
  presets: [
    [
      "@babel/env",
      {
        modules: false
      }
    ],
    "@babel/react"
  ],
  plugins: [
    ["@babel/plugin-proposal-decorators", { legacy: true }],
    ["@babel/plugin-proposal-class-properties", { loose: true }],
    "transform-es2015-modules-commonjs"
  ]
};
module.exports = require("babel-jest").createTransformer(config);

Aquí está mi jest.config.js :

module.exports = {
  collectCoverageFrom: ["src/**/*.{js,jsx,mjs}"],
  testMatch: ["<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}", "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"],
  transform: {
    "^.+\\.(js|jsx|mjs)$": "<rootDir>/config/jest/jest-transformer.js"
  },
  transformIgnorePatterns: ["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"]
};

Y mi todavía tengo mi .babelrc
''
entornos const = require ("./ env-config.js");

module.exports = {
Preajustes: [
[
"siguiente / babel",
{
"preset-env": {
useBuiltIns: "entrada"
}
}
]
],
complementos: [
["styled-components", {ssr: true, displayName: true, preprocess: false}],
[
"módulo de resolución",
{
raíz: ["./"]
}
]
],
env: {
dev: {
complementos: [
["transform-define", entornos],
["módulo-solucionador", {root: ["./"]}],
"transform-decorators-legacy",
"propiedades de clase de transformación"
]
},
construir: {
complementos: [
["transform-define", entornos],
["módulo-solucionador", {root: ["./"]}],
"transform-decorators-legacy",
"propiedades de clase de transformación"
]
},
producción: {
Preajustes: [
[
"minify", // por qué agregar minify aquí, ejecutamos uglify en todos los paquetes de código
{
mangle: falso,
evaluar: falso
}
]
],
complementos: [
["transform-define", entornos],
["@ babel / plugin-proposition-decorators", {legacy: true}],
["@ babel / complemento-propuesta-clase-propiedades", {suelto: verdadero}],
["módulo-solucionador", {root: ["./"]}]
],
comentarios: falso,
compacto: cierto,
minificado: verdadero
}
}
};
`` ``
Espero que esto pueda hacer que ustedes pasen este problema. Alegría.

@GeorgianSorinMaxim El problema es que mi aplicación de broma ignora el archivo .babelrc y cambia a babel.config.js resolverá el problema, pero lo resolví de todos modos, mi respuesta está arriba de este comentario.

gracias @GeorgianSorinMaxim @hoaiduyit al final lo resolví simplemente creando un transformador personalizado para babel-jest. No hay otros cambios donde sea necesario.

Babel 7 parece requerir babel.config.js para funcionar correctamente, utilícelo en lugar de babelrc

babel-jest todavía se basa en babel-core de Babel 6, si desea usar Babel 7 , puede usar
este transformador babel7-broma

babel-jest funciona bien con babel 7, sin necesidad de un transformador personalizado

@SimenB Cambié el nombre de mi .babelrc a babel.config.js pero todavía muestra ese error con un token inesperado. Sin embargo, funciona con babel7-pre.42. ¿Hay otras cosas que comúnmente se pasan por alto? :) Gracias.

@alexindigo Mira esto sobre cómo escribir babel.config.js

https://babeljs.io/docs/en/configuration

Sí, ejecutar yarn upgrade --latest solucionó el problema :)

@alexindigo @hoaiduyit ¿Cómo dieron cuenta de esto sobre el babel.config.js ? Luchando contra el mismo problema y encontrando sus soluciones, estaba pensando para mí mismo ... _ "hmmm, no hay forma de que esto funcione, pero lo intentaré de todos modos". _ Pero efectivamente lo hizo lulz. Gracias

Configuración de broma y enzima: agregue el siguiente código en package.json

"jest": {
    "testEnvironment": "jsdom",
    "moduleDirectories": [
      "src",
      "node_modules"
    ],
    "moduleNameMapper": {
      "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js",
      "\\.(jpg|gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"
    },
    "transform": {
      "^.+\\.(js|jsx)$": "babel-jest",
      ".+\\.(css|styl|less|sass|scss)$": "<rootDir>/node_modules/jest-css-modules-transform"
    },
    "setupTestFrameworkScriptFile": "<rootDir>/setupTests.js",
    "setupFiles": [
      "<rootDir>setup.js"
    ],
    "moduleFileExtensions": [
      "css",
      "scss",
      "js",
      "json",
      "jsx"
    ],
    "testRegex": "\/test\/spec\/.*\\.js$",
    "transformIgnorePatterns": [
      "/node_modules/(?!test-component).+\\.js$"
    ]
  }

Para la configuración de Enzyme => setup.js

import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
configure({ adapter: new Adapter() })

Para setupTestFrameworkScriptFile: setupTests.js global.fetch = require ('jest-fetch-mock')

const { JSDOM } = require('jsdom')
const jsdom = new JSDOM('<!doctype html><html><body></body></html>')
const { window } = jsdom

const exposedProperties = ['window', 'navigator', 'document']
const { document } = new JSDOM('').window
global.document = document
global.window = document.defaultView
global.HTMLElement = window.HTMLElement
global.HTMLAnchorElement = window.HTMLAnchorElement

Object.keys(document.defaultView).forEach(property => {
  if (typeof global[property] === 'undefined') {
    exposedProperties.push(property)
    global[property] = document.defaultView[property]
  }
})

global.navigator = {
  userAgent: 'node.js',
}

¿Solo los archivos .tsx enfrentan el mismo problema?

simplemente difundiendo la noticia, Jest v24 se actualizó para usar Babel 7 internamente, usando babel bridge o babel7-jest ya no debería ser necesario
https://twitter.com/i/web/status/1088904207653105664

Cambié el nombre de .babelrc a babel.config.js y también actualicé a Babel7 y todavía tengo el mismo error que antes. Mi archivo babel.config.js :

module.exports = function (api) {
  api.cache(true);

  const presets = ["@babel/preset-env"];

  return {
    presets
  };
}

Instalé @babel/preset-react y lo agregué a mi archivo babel.config.js . Se corrigió el error.

Mi archivo babel.config.js no fue detectado por babel-jest , porque lo puse dentro del directorio __test__ . Lo moví al directorio superior donde se encontraba package.json y todo funcionó.

Resolví un problema similar haciendo lo siguiente:

1- agregue el archivo de configuración de la enzima y escriba lo siguiente:

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

2- agregue la configuración de broma a su package.json así:

"jest": {
 "setupFilesAfterEnv": [
  "./path to your setup file/setupEnzyme.js"
 ]
}

3- agregue el archivo .babelrc a su ruta raíz y escriba lo siguiente en él:

{
    "env": {
        "test": {
            "presets": [
                "@babel/preset-env",
                "@babel/preset-react"
            ]
        }
    }
}

4- si tiene un error en la palabra clave "esperar" en su prueba, simplemente ejecute npm install -D chai e importe la función de espera en su código de prueba así import { expect } from 'chai';

si aún recibe un error, intente instalar dependencias de babel como esa npm install -D @babel/core @babel/preset-env @babel/preset-react

espero que esto ayude.

Después de 3 días, descubro las soluciones para este problema.
Hay 2 soluciones para esto:

Solución 1:

Puede cambiar el nombre de su archivo de .babelrc a babel.config.js , y esto funcionará.

Mi solución:

No tenía un archivo .babelrc, así que pensé que hacer lo contrario también debería funcionar y creé un archivo .babelrc usando la información preestablecida de babel.config.js en su lugar. (Creé un archivo adicional, no cambié el nombre del original)
Al ejecutar la prueba nuevamente, recibí un nuevo error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3" .
Busqué en Google ese error y me llevó aquí . Seguí las instrucciones ( npm install [email protected] ) y la prueba ahora se está ejecutando y pasando.

simplemente difundiendo la noticia, Jest v24 se actualizó para usar Babel 7 internamente, usando babel bridge o babel7-jest ya no debería ser necesario
https://twitter.com/i/web/status/1088904207653105664

La actualización a Jest v24 me solucionó este problema :)

obteniendo unexpected token error para

> 10 | const browser; (el punto y coma al final)

mi paquete.json

 "dependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.3.4",
    "@babel/register": "^7.0.0",
    "assert": "^1.4.1",
    "chai": "^4.2.0",
    "jest-puppeteer": "^4.0.0",
    "screen-info": "^1.0.1",
    "screenres": "^2.0.1"
  },
  "devDependencies": {
    "@babel/plugin-transform-modules-commonjs": "^7.2.0",
    "@babel/preset-env": "^7.3.4",
    "babel-jest": "^24.5.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-jest": "^24.3.0",
    "jest": "^24.5.0",
    "jest-cli": "^24.5.0",
    "puppeteer": "^1.13.0"
  },
  "jest": {
    "transformIgnorePatterns": [
      "/node_modules/(?!@babel).+\\.js$"
    ],
    "transform": {
      "^.+\\.js?$": "babel-jest"
    }
  },

babel.config.js

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          node: 'current'
        },
      },
      'jest'
    ]
  ],
  env: {
    test: {
      plugins: ['@babel/plugin-transform-modules-commonjs']
    }
  }
}

Solución de hoaiduyit probada. Funciona. Solo necesito agregar babel.config.js, instalar babel-jest transform / transpile jest en jest.config.js

Después de 3 días, descubro las soluciones para este problema.
Hay 2 soluciones para esto:

Solución 1:

Puede cambiar el nombre de su archivo de .babelrc a babel.config.js , y esto funcionará.

Solucion 2:

Estoy usando de esta manera.
Crea un archivo de transformación como este (el mío es jest-transforme.js ):

const config = {
  babelrc: false,
  presets: [
    [
      "@babel/env",
      {
        modules: false
      }
    ],
    "@babel/react"
  ],
  plugins: [
    ["@babel/plugin-proposal-decorators", { legacy: true }],
    ["@babel/plugin-proposal-class-properties", { loose: true }],
    "transform-es2015-modules-commonjs"
  ]
};
module.exports = require("babel-jest").createTransformer(config);

Aquí está mi jest.config.js :

module.exports = {
  collectCoverageFrom: ["src/**/*.{js,jsx,mjs}"],
  testMatch: ["<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}", "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"],
  transform: {
    "^.+\\.(js|jsx|mjs)$": "<rootDir>/config/jest/jest-transformer.js"
  },
  transformIgnorePatterns: ["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"]
};

Y mi todavía tengo mi .babelrc

const enviroments = require("./env-config.js");

module.exports = {
  presets: [
    [
      "next/babel",
      {
        "preset-env": {
          useBuiltIns: "entry"
        }
      }
    ]
  ],
  plugins: [
    ["styled-components", { ssr: true, displayName: true, preprocess: false }],
    [
      "module-resolver",
      {
        root: ["./"]
      }
    ]
  ],
  env: {
    dev: {
      plugins: [
        ["transform-define", enviroments],
        ["module-resolver", { root: ["./"] }],
        "transform-decorators-legacy",
        "transform-class-properties"
      ]
    },
    build: {
      plugins: [
        ["transform-define", enviroments],
        ["module-resolver", { root: ["./"] }],
        "transform-decorators-legacy",
        "transform-class-properties"
      ]
    },
    production: {
      presets: [
        [
          "minify", // why add minify here, we run uglify over the whole code bundles
          {
            mangle: false,
            evaluate: false
          }
        ]
      ],
      plugins: [
        ["transform-define", enviroments],
        ["@babel/plugin-proposal-decorators", { legacy: true }],
        ["@babel/plugin-proposal-class-properties", { loose: true }],
        ["module-resolver", { root: ["./"] }]
      ],
      comments: false,
      compact: true,
      minified: true
    }
  }
};

Espero que esto pueda hacer que ustedes pasen este problema. Alegría.

tks para su método ~ ¡este método puede solucionar mi problema correctamente!

Hola, he intentado varias cosas en este hilo, pero parece que nada funciona. El error principal es extraño porque parece apuntar a números de línea que no tienen sentido, casi como si el código fuente y el código real que intenta ejecutarse no se alinean.

Este error, Jest encontró un token inesperado, permanece. Estoy en Jest> 24, sin ningún tipo de script, es una aplicación de creación de reacción expulsada bastante recientemente (hace 6 meses ~). Limpiar la caché y eliminar node_modules no ayudó. Quizás alguien podría explicar exactamente qué configuración debe estar en su lugar para que Jest se transforme y ejecute correctamente y qué pistas da mi error exacto ...

FAIL  __e2e__/chat/sms.spec.js
  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /Users/ben/dev/app/webui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:17
    export default function _asyncToGenerator(fn) {
    ^^^^^^

    SyntaxError: Unexpected token export

       5 |   afterEach(async () => {
       6 |     await logout();
    >  7 | 
         | ^
       8 |     await page.evaluate(() => {
       9 |       localStorage.clear();
      10 |     });

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:471:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:513:25)
      at Object.<anonymous> (__e2e__/chat/sms.spec.js:7:49)

Gracias a todos,

Jenkins falla debido a este problema, ¿hay algunas soluciones que funcionen?

Para cualquiera que use Create-React-App, agregar transformignorepatterns a su package.json no resolverá el problema ya que solo se pueden cambiar ciertas configuraciones de broma en package.json cuando se usa CRA.

Tuve problemas con Jest al recoger una biblioteca interna, Jest mostraba errores de 'token inesperado' dondequiera que tuviera mis importaciones de esta biblioteca.

Para resolver esto, puede cambiar su secuencia de comandos de prueba a la siguiente:
"test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(<your-package-goes-here>)/)'",

Hola a todos, estaba luchando por hacer pruebas unitarias con mi pequeño proyecto, que se llama JetSet y está escrito en React Native. Busqué durante 2 días para resolver este problema y traté de editar cosas como babel.config.js, eliminar ese archivo y luego crear el archivo .babel (y agregar algunas mierdas).


_Informe de error:_
D: \ jetset \ JetSetApp> broma SaveData.test.js
FAIL __test __ / SaveData.test.js
● El conjunto de pruebas no se pudo ejecutar.

Jest encountered an unexpected token

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

Here's what you can do:
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html

Details:

D:\jetset\JetSetApp\node_modules\expo-file-system\build\index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import * as FileSystem from './FileSystem';
                                                                                                ^

SyntaxError: Unexpected token *

  1 | import React, { Component } from 'react'
  2 | import { View, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native'
> 3 | import { documentDirectory, getInfoAsync, readDirectoryAsync, readAsStringAsync, writeAsStringAsync, deleteAsync } from 'expo-file-system';
    | ^
  4 |
  5 | /**
  6 |  * This class primarily serves to handle files within the phone system so that results can be stored

  at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
  at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
  at Object.<anonymous> (app/resources/SaveData/SaveData.js:3:1)

Grupos de pruebas: 1 falló, 1 en total
Pruebas: 0 en total
Instantáneas: 0 en total
Tiempo: 3.509s
Ejecutó todos los conjuntos de pruebas que coinciden con /SaveData.test.js/i.


_ babel.config.js _
module.exports = function (api) {
api.cache (verdadero);
regreso {
presets: ['babel-preset-expo'],
};
};


_ package.json _
{
"main": "node_modules / expo / AppEntry.js",
"guiones": {
"start": "expo start",
"android": "expo start --android",
"ios": "inicio de la exposición --ios",
"web": "expo start --web",
"eject": "expo eject",
"prueba": "broma"
},
"broma": {
"preset": "react-native"
},
"dependencias": {
"expo": "^ 34.0.1",
"expo-file-system": "^ 6.0.2",
"expo-mail-composer": "^ 6.0.0",
"momento": "^ 2.24.0",
"reaccionar": "16.8.3",
"react-dom": "^ 16.8.6",
"react-native": " https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz ",
"react-native-gesto-handler": "^ 1.3.0",
"react-native-selection-group": "^ 1.1.2",
"react-native-web": "^ 0.11.4"
},
"devDependencies": {
"@ babel / core": "^ 7.6.2",
"@ babel / preset-env": "^ 7.6.2",
"babel-jest": "^ 24.9.0",
"babel-preset-expo": "^ 6.0.0",
"broma": "^ 24.9.0",
"prop-types": "^ 15.7.2",
"react-native-dispats-keyboard": "^ 1.0.0",
"react-native-modal-datetime-picker": "^ 7.5.0",
"react-navigation": "^ 3.12.1"
},
"privado": verdadero
}

Para su información, creo que terminamos encontrando una solución realmente tonta para esto, como si todo el sistema de compilación no se estuviera comportando bien si NODE_ENV = "test" no estaba configurado.

En las versiones más nuevas de React Jest está integrado, por lo tanto, en package.json, el script de prueba debe ser
"test": "react-scripts test"
en lugar de
"test": "jest"

En las versiones más nuevas de React Jest está integrado, por lo tanto, en package.json, el script de prueba debe ser
"test": "react-scripts test"
en lugar de
"test": "jest"

¡Muchas gracias, eso me solucionó el problema!

Después de probar MUCHO, el problema para mí:
falta "transform-es2015-modules-commonjs", en el archivo .babelrc

{
  "presets": ["next/babel"],
  "plugins": [
    ["styled-components", { "ssr": true, "displayName": true, "preprocess": false } ],
    "transform-flow-strip-types",
    "jsx-control-statements",
    "import-glob",
    "transform-es2015-modules-commonjs",
    [
      "import",
      {
        "libraryName": "antd",
        "style": "css"
      }
    ]
  ]
}

"broma": "^ 24.9.0",
"babel-jest": "23.6.0",

intenta actualizar tu broma y babel-broma

Cambié el nombre de .babelrc a babel.config.js y también actualicé a Babel7 y todavía tengo el mismo error que antes. Mi archivo babel.config.js :

module.exports = function (api) {
  api.cache(true);

  const presets = ["@babel/preset-env"];

  return {
    presets
  };
}

Instalé @babel/preset-react y lo agregué a mi archivo babel.config.js . Se corrigió el error.

esto solucionó mi problema, instalé @ babel / preset-env y lo agregué a babel.config.js y lo solucioné

gracias @jmayergit

Había cambiado el archivo babel.rc por el archivo babel.config.js pero no me funcionaba. Luego vi esta respuesta: https://stackoverflow.com/questions/58470062/test-jest-with-babel-plugin-import
Si uno tiene complementos de importación, separe los complementos para los entornos de prueba, desarrollo y producción.

Mi archivo babel.config.js ahora se ve así y funciona:

module.exports = {
  presets: [
    [
      'next/babel',
    ],
  ],
  env: {
    test: {

    },
    dev: {
      plugins: [
        ['import', { libraryName: 'antd', style: 'css' }],
      ],
    },
    production: {
      plugins: [
        ['import', { libraryName: 'antd', style: 'css' }],
      ],
    },
  },
};

También estoy luchando con este error de 5 días

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".   

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    SyntaxError: C:\Users\SK-PC\Desktop\React-Course\expansify\src\test\components\MyNavbar.test.js: Unexpected token (5:28)

      3 | import { MyNavbar } from '../../components/MyNavbar'
      4 | test("Should return MyNavbar component", () => {
    > 5 |     const wrapper = shallow(<MyNavbar />)
        |                             ^
      6 |     expect(wrapper.find('.navbar-brand').find('kbd').text()).toBe("Expensify")
      7 |     // const renderer = new ReactShallowRenderer()
      8 |     // renderer.render(<MyNavbar />)

      at Parser._raise (node_modules/@babel/parser/src/parser/location.js:241:45)
      at Parser.raiseWithData (node_modules/@babel/parser/src/parser/location.js:236:17)
      at Parser.raise (node_modules/@babel/parser/src/parser/location.js:220:17)
      at Parser.unexpected (node_modules/@babel/parser/src/parser/util.js:149:16)
      at Parser.parseExprAtom (node_modules/@babel/parser/src/parser/expression.js:1144:20)
      at Parser.parseExprSubscripts (node_modules/@babel/parser/src/parser/expression.js:539:23)
      at Parser.parseMaybeUnary (node_modules/@babel/parser/src/parser/expression.js:519:21)
      at Parser.parseExprOps (node_modules/@babel/parser/src/parser/expression.js:311:23)
      at Parser.parseMaybeConditional (node_modules/@babel/parser/src/parser/expression.js:263:23)
      at Parser.parseMaybeAssign (node_modules/@babel/parser/src/parser/expression.js:211:21)

 PASS  src/test/reducers/filters.test.js

Test Suites: 1 failed, 5 passed, 6 total
Tests:       29 passed, 29 total
Snapshots:   0 total
Time:        12.144s
Ran all test suites.

@fullstacksk

En las versiones más nuevas de React Jest está integrado, por lo tanto, en package.json, el script de prueba debe ser
"test": "react-scripts test"
en lugar de
"test": "jest"

Puede leer el documento en:
https://jestjs.io/docs/en/tutorial-react
https://create-react-app.dev/docs/running-tests/#docsNav

@ catman1
No he instalado dependencias como create-react-app o react-scripts.
¿Funcionará?
"test": "react-scripts test"
en lugar de
"test": "jest"

Ahora está funcionando, cuando usé babel-preset-jest para probar la opción con env y react. He eliminado babel-jeast.

Me funcionó: incluya "@ babel / preset-react" en babel.config.js

https://medium.com/@audreyhal/how -to-solve-jest-error-with-create-react-app-part-1-80f33aa1661a

Vi este error después de cometer un error estúpido y escribir mi primer archivo de prueba con la extensión .ts lugar de .tsx . Lejos del problema original, pero pensé que podría ser útil para alguien 😄

¿Fue útil esta página
0 / 5 - 0 calificaciones