Jest: Jest encontrou um token inesperado com o aplicativo React

Criado em 31 ago. 2018  ·  42Comentários  ·  Fonte: facebook/jest

Love Jest? Considere apoiar nosso coletivo: 👉 https://opencollective.com/jest/donate

🐛 Relatório de Bug

Ao tentar executar testes com Jest em um aplicativo React, recebo um erro Jest encountered an unexpected token . Copiei o componente Link e testei diretamente daqui . Este é o erro:

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)

Aqui está meu 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"
  }
}

Este é meu arquivo .babelrc (localizado no diretório raiz):

{
  "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"]
    }
  }
}

Reproduzir

Passos para reproduzir o comportamento:

  • Instale Jest com yarn add --dev babel-jest babel-core@^7.0.0-0 @babel/core
  • Crie um teste
  • Execute yarn test

Comportamento esperado

  • Jest deve funcionar

Execute npx envinfo --preset jest

Cole os resultados aqui:

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

Comentários muito úteis

Após 3 dias, acabei de descobrir as soluções para esse problema.
Existem 2 soluções para isso:

Solução 1:

Você pode alterar o nome do arquivo de .babelrc para babel.config.js e isso funcionará.

## Solução 2:
Estou usando dessa forma.
Crie um arquivo de transformação como este (o meu é 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);

Aqui está meu 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)$"]
};

E meu ainda tenho meu .babelrc
`` `
const enviroments = require ("./ env-config.js");

module.exports = {
predefinições: [
[
"próximo / babel",
{
"preset-env": {
useBuiltIns: "entrada"
}
}
]
],
plugins: [
["styled-components", {ssr: true, displayName: true, pré-processo: false}],
[
"módulo-resolver",
{
raiz: ["./"]
}
]
],
env: {
dev: {
plugins: [
["transformar-definir", ambientes],
["module-resolver", {root: ["./"]}],
"transform-decorators-legacy",
"transform-class-properties"
]
},
construir: {
plugins: [
["transformar-definir", ambientes],
["module-resolver", {root: ["./"]}],
"transform-decorators-legacy",
"transform-class-properties"
]
},
Produção: {
predefinições: [
[
"minify", // por que adicionar minify aqui, executamos o uglify em todos os pacotes de código
{
mangle: false,
avaliar: falso
}
]
],
plugins: [
["transformar-definir", ambientes],
["@ babel / plugin-proposal-decorators", {legacy: true}],
["@ babel / plugin-proposal-class-properties", {loose: true}],
["module-resolver", {root: ["./"]}]
],
comentários: falso,
compacto: verdadeiro,
minimizado: verdadeiro
}
}
};
`` ``
Espero que isso ajude vocês a passar esse problema. Alegrar.

Todos 42 comentários

Eu também tenho o mesmo problema.

Mesmo problema aqui.

mesmo problema aqui .. um pouco mais complicado pois estou trabalhando com um monorepo.

@fabioSalimbeni @hoaiduyit @mikedloss Eu fiz meus testes React e React Native ( Jest e enzyme ) passar em um monorepo Lerna usando Babel 7.

Você precisa usar a nova configuração do Babel com babel.config.js se estiver trabalhando em um monorepo: https://babeljs.io/docs/en/v7-migration.

Este é meu babel.config.js para a raiz do monorepo:

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

É assim que meu babel.config.js parece para webApp1 um dos aplicativos 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'
            ]
        }
    }
};

E esta é a configuração do 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 parece com:

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

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

fileMocks.js parece com:

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

styleMocks.js parece com:

module.exports = {};

Você também precisará adicionar alguns plug-ins Babel e a versão babel-core como devDependencies em package.json de cada aplicativo:

        ...
        "@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",
        ...

Após 3 dias, acabei de descobrir as soluções para esse problema.
Existem 2 soluções para isso:

Solução 1:

Você pode alterar o nome do arquivo de .babelrc para babel.config.js e isso funcionará.

## Solução 2:
Estou usando dessa forma.
Crie um arquivo de transformação como este (o meu é 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);

Aqui está meu 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)$"]
};

E meu ainda tenho meu .babelrc
`` `
const enviroments = require ("./ env-config.js");

module.exports = {
predefinições: [
[
"próximo / babel",
{
"preset-env": {
useBuiltIns: "entrada"
}
}
]
],
plugins: [
["styled-components", {ssr: true, displayName: true, pré-processo: false}],
[
"módulo-resolver",
{
raiz: ["./"]
}
]
],
env: {
dev: {
plugins: [
["transformar-definir", ambientes],
["module-resolver", {root: ["./"]}],
"transform-decorators-legacy",
"transform-class-properties"
]
},
construir: {
plugins: [
["transformar-definir", ambientes],
["module-resolver", {root: ["./"]}],
"transform-decorators-legacy",
"transform-class-properties"
]
},
Produção: {
predefinições: [
[
"minify", // por que adicionar minify aqui, executamos o uglify em todos os pacotes de código
{
mangle: false,
avaliar: falso
}
]
],
plugins: [
["transformar-definir", ambientes],
["@ babel / plugin-proposal-decorators", {legacy: true}],
["@ babel / plugin-proposal-class-properties", {loose: true}],
["module-resolver", {root: ["./"]}]
],
comentários: falso,
compacto: verdadeiro,
minimizado: verdadeiro
}
}
};
`` ``
Espero que isso ajude vocês a passar esse problema. Alegrar.

@GeorgianSorinMaxim O problema é que meu aplicativo de brincadeira ignora .babelrc arquivo e mudar para babel.config.js resolverá o problema, mas resolvi mesmo assim, minha resposta está acima deste comentário.

obrigado @GeorgianSorinMaxim @hoaiduyit no final resolvi simplesmente criando um transformador personalizado para o babel-jest. Nenhuma outra mudança quando necessária.

O Babel 7 parece requerer babel.config.js para funcionar corretamente, use-o em vez do babelrc

babel-jest ainda depende de babel-core do Babel 6, se você quiser usar o Babel 7, pode usar
este transformador babel7-jest

babel-jest funciona perfeitamente com o babel 7, sem necessidade de um transformador personalizado

@SimenB Eu .babelrc para babel.config.js mas ainda mostra aquele erro com token inesperado. Ele funciona com o babel7-pre.42. Existem outras coisas comumente perdidas? :) Obrigado.

@alexindigo Veja como escrever babel.config.js

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

Sim, executar yarn upgrade --latest corrigiu o problema :)

@alexindigo @hoaiduyit Como babel.config.js ? Lutando contra o mesmo problema e encontrando suas soluções, eu estava pensando comigo mesmo ... _ "hmmm, Não tem como isso vai funcionar, mas vou tentar de qualquer maneira." _ Mas com certeza funcionou lulz. obrigado

Configuração de Jest e enzima: Adicione o seguinte código em 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 configuração 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',
}

apenas os arquivos .tsx enfrentam o mesmo problema?

apenas espalhando a notícia, Jest v24 foi atualizado para usar o Babel 7 internamente, usando babel bridge ou babel7-jest não deve mais ser necessário
https://twitter.com/i/web/status/1088904207653105664

Eu renomei .babelrc para babel.config.js e também atualizei para Babel7 e ainda tenho o mesmo erro de antes. Meu arquivo babel.config.js :

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

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

  return {
    presets
  };
}

Eu instalei @babel/preset-react e o adicionei ao meu arquivo babel.config.js . Corrigido o erro.

Meu arquivo babel.config.js não estava sendo detectado por babel-jest , porque eu o coloquei dentro do diretório __test__ . Mudei-o para o diretório superior, onde package.json estava localizado e tudo funcionou.

Resolvi um problema semelhante fazendo o seguinte:

1- adicione o arquivo de configuração da enzima e escreva o seguinte:

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

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

2- adicione a configuração jest ao seu package.json assim:

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

3- adicione o arquivo .babelrc ao seu caminho raiz e escreva o seguinte nele:

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

4- se você obteve um erro na palavra-chave "esperar" em seu teste, apenas execute npm install -D chai e importe a função esperar em seu código de teste como import { expect } from 'chai';

se você ainda receber um erro tente instalar dependências do babel como essa npm install -D @babel/core @babel/preset-env @babel/preset-react

espero que isto ajude.

Após 3 dias, acabei de descobrir as soluções para esse problema.
Existem 2 soluções para isso:

Solução 1:

Você pode alterar o nome do arquivo de .babelrc para babel.config.js e isso funcionará.

Minha solução:

Eu não tinha um arquivo .babelrc, então achei que fazer o inverso também deveria funcionar e criei um arquivo .babelrc usando as informações predefinidas de babel.config.js. (Criei um arquivo adicional, não renomei o original)
Ao executar o teste novamente, recebi um novo erro: Requires Babel "^7.0.0-0", but was loaded with "6.26.3" .
Pesquisei esse erro e me trouxe até aqui . Segui as instruções ( npm install [email protected] ) e o teste agora está funcionando e passando.

apenas espalhando a notícia, Jest v24 foi atualizado para usar o Babel 7 internamente, usando babel bridge ou babel7-jest não deve mais ser necessário
https://twitter.com/i/web/status/1088904207653105664

Atualizar para Jest v24 corrigiu esse problema para mim :)

recebendo unexpected token erro para

> 10 | const browser; (o ponto e vírgula no final)

meu package.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']
    }
  }
}

Solução hoaiduyit testada. Funciona. Eu só preciso adicionar babel.config.js, instalar babel-jest transform / transpile jest em jest.config.js

Após 3 dias, acabei de descobrir as soluções para esse problema.
Existem 2 soluções para isso:

Solução 1:

Você pode alterar o nome do arquivo de .babelrc para babel.config.js e isso funcionará.

Solução 2:

Estou usando dessa forma.
Crie um arquivo de transformação como este (o meu é 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);

Aqui está meu 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)$"]
};

E meu ainda tenho meu .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 isso ajude vocês a passar esse problema. Alegrar.

tks para o seu método ~ este método pode corrigir meu problema corretamente!

Olá - tentei várias coisas neste tópico, mas nada parece estar funcionando. O erro principal é estranho b / c parece apontar para números de linha que não fazem sentido, quase como se o código-fonte e o código real tentando ser executado não se alinham.

Este erro, Jest encontrou um token inesperado, permanece. Estou no Jest> 24, nenhum script de tipo, é um app react-create ejetado recentemente (6 meses atrás ~). Limpar o cache e remover node_modules não ajudou. Talvez alguém possa explicar exatamente qual configuração precisa estar no lugar para que o jest se transforme e execute corretamente e quais dicas meu erro exato dá ...

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)

Obrigado a todos,

Jenkins falha devido a esse problema. Existem algumas soluções de trabalho?

Para qualquer um usando Create-React-App, adicionar transformignorepatterns ao seu package.json não resolverá o problema, pois apenas certas configurações de jest podem ser alteradas no package.json ao usar o CRA.

Tive problemas com Jest pegando uma biblioteca interna, Jest exibia erros de 'token inesperado' onde quer que eu tivesse minhas importações desta biblioteca.

Para resolver isso, você pode alterar seu script de teste para o seguinte:
"test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(<your-package-goes-here>)/)'",

Olá a todos, Eu estava lutando para fazer testes de unidade com meu pequeno projeto chamado JetSet e escrito em React Native. Procurei por 2 dias para resolver esse problema, e tentei editar coisas como babel.config.js, deletar aquele arquivo e então criar o arquivo .babel (e adicionar algumas merdas).


_Relatório de erro:_
D: \ jetset \ JetSetApp> jest SaveData.test.js
FAIL __test __ / SaveData.test.js
● O conjunto de testes falhou ao executar

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)

Suítes de teste: 1 falha, 1 total
Testes: 0 no total
Instantâneos: 0 no total
Tempo: 3.509s
Executei todos os conjuntos de testes correspondentes a /SaveData.test.js/i.


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


_ package.json _
{
"main": "node_modules / expo / AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"ejetar": "expo ejetar",
"teste": "brincadeira"
},
"jest": {
"preset": "react-native"
},
"dependências": {
"expo": "^ 34.0.1",
"expo-file-system": "^ 6.0.2",
"expo-mail-composer": "^ 6.0.0",
"momento": "^ 2.24.0",
"reagir": "16.8.3",
"react-dom": "^ 16.8.6",
"react-native": " https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz ",
"reagir-nativo-manipulador de gestos": "^ 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",
"jest": "^ 24.9.0",
"prop-types": "^ 15.7.2",
"react-native-CC0-keyboard": "^ 1.0.0",
"react-native-modal-datetime-picker": "^ 7.5.0",
"react-navigation": "^ 3.12.1"
},
"privado": verdadeiro
}

Para sua informação, acho que acabamos encontrando uma solução realmente boba para isso, como se todo o sistema de compilação não estivesse se comportando bem se NODE_ENV = "teste" não fosse definido.

Nas versões mais recentes do React Jest é integrado, portanto, no package.json, o script de teste deve ser
"test": "react-scripts test"
ao invés de
"test": "jest"

Nas versões mais recentes do React Jest é integrado, portanto, no package.json, o script de teste deve ser
"test": "react-scripts test"
ao invés de
"test": "jest"

Muito obrigado, isso resolveu o problema para mim!

Depois de tentar MUITO, o problema para mim:
faltando "transform-es2015-modules-commonjs", no arquivo .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"
      }
    ]
  ]
}

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

tente atualizar sua brincadeira e babel-jest

Eu renomei .babelrc para babel.config.js e também atualizei para Babel7 e ainda tenho o mesmo erro de antes. Meu arquivo babel.config.js :

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

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

  return {
    presets
  };
}

Eu instalei @babel/preset-react e o adicionei ao meu arquivo babel.config.js . Corrigido o erro.

isso resolveu meu problema, instalei @ babel / preset-env e adicionei ao babel.config.js e ele consertou

obrigado @jmayergit

Eu tinha mudado o arquivo babel.rc para o arquivo babel.config.js, mas não estava funcionando para mim. Então eu vi esta resposta: https://stackoverflow.com/questions/58470062/test-jest-with-babel-plugin-import
Se um tiver plug-ins de importação, separe os plug-ins para ambientes de teste, desenvolvimento e produção.

Meu arquivo babel.config.js agora se parece com o seguinte, o que funciona:

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

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

Também estou lutando com este erro de 5 dias

    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

Nas versões mais recentes do React Jest é integrado, portanto, no package.json, o script de teste deve ser
"test": "react-scripts test"
ao invés de
"test": "jest"

Você pode ler o documento em:
https://jestjs.io/docs/en/tutorial-react
https://create-react-app.dev/docs/running-tests/#docsNav

@ catmans1
Não instalei dependências como create-react-app ou react-scripts.
será que vai dar certo?
"test": "react-scripts test"
ao invés de
"test": "jest"

Agora está funcionando, quando usei babel-preset-jest para testar a opção com env e react. Eu removi a babel-jeast.

Funcionou para mim: inclua “@ babel / preset-react” em babel.config.js

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

Eu vi esse erro depois de cometer um erro estúpido e escrever meu primeiro arquivo de teste com .ts vez da extensão .tsx . Longe do problema original, mas pensei que pudesse ser útil para alguém 😄

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

kgowru picture kgowru  ·  3Comentários

ianp picture ianp  ·  3Comentários

kentor picture kentor  ·  3Comentários

Secretmapper picture Secretmapper  ·  3Comentários

jardakotesovec picture jardakotesovec  ·  3Comentários