Love Jest? Considere apoiar nosso coletivo: 👉 https://opencollective.com/jest/donate
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"]
}
}
}
Passos para reproduzir o comportamento:
yarn add --dev babel-jest babel-core@^7.0.0-0 @babel/core
yarn test
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
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:
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
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
parababel.config.js
e isso funcionará.
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
oubabel7-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
parababel.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
parababel.config.js
e também atualizei para Babel7 e ainda tenho o mesmo erro de antes. Meu arquivobabel.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 arquivobabel.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 😄
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
parababel.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
):Aqui está meu
jest.config.js
: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.