Jest: Importação inesperada de token para módulos ES6

Tenho o mesmo problema com React-Native e Jest,
Se você iniciar um novo projeto com:
react-native init AwesomeProject
cd AwesomeProject

em seguida, instale um módulo como npm install native-base --save
importe qualquer componente da base nativa para o seu arquivo index.ios.js

O teste npm gerará este erro:
../test/node_modules/native-base/index.js:4
importar gaveta de './Components/vendor/react-native-drawer';
^^^^^^
SyntaxError: Importação de token inesperada

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

Estou tendo o mesmo problema, o link fornecido por @cpojer não parece ajudar 😕

Oi! 'transformIgnorePatterns' faz .... mmmm ... que deve fazer - ignorando)
Mas como posso usar essa importação no pacote de node_modules?

Esses adereços me ajudaram :)

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

UPD1
Atualmente, minha configuração do Jest é:

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

... e está funcionando para mim :)

Atenciosamente, Pavel Tretyakov

Oi pessoal, ainda estou tendo esse problema, mas não estou usando o react native. O problema é sempre corrigido usando jest --no-cache. Existe uma maneira de fazer o jest funcionar usando o cache, sem lançar esse erro?

Não consigo fazer com que essa transformação funcione com meu aplicativo criar-reagir-app. Sempre obtenha "Importação de token inesperada" em quaisquer arquivos de teste que contenham importação ES6. Tentei todas as sugestões que pude encontrar. no-cache não tem impacto. Obviamente, não posso ignorar esses arquivos da transformação (eles precisam ser transformados!).

Desisto. Prazer em fornecer todas as informações necessárias.

Parece que também estou enfrentando esse problema.

Mesmo aqui

Mesmo aqui

Provavelmente todos vocês estão enfrentando esse problema porque os módulos ES não são suportados no Node e você deliberadamente parou de compilá-los com seu pipeline de construção (webpack, rollup) ao enviá-los para o navegador.

Você precisa habilitar a compilação de módulos ES para CommonJS para o env de "teste" em seu babelrc, consulte https://babeljs.io/docs/usage/babelrc/#env -option e https://babeljs.io/docs/ plugins / transform-es2015-modules-commonjs /

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

Obrigado pela sua resposta, cpojer. Ontem, removi minhas configurações de env de nó e permiti que executasse com env de nó padrão, porque jest estava funcionando globalmente, mas não ao usar scripts de nó. Pareceu resolver o problema, então acredito que meu problema era com as configurações do node-env. Mas ainda é algo a ser monitorado.

EDIT: Isso não funcionou. A correção de @cpojer funcionou

A correção de @cpojer funcionou para mim, obrigado

Incrível, também funcionou para mim, obrigado!

Estou tendo um problema semelhante em meu aplicativo nativo de reação bastante simples.

Ao executar npm test ou jest é devolvido 'SyntaxError: Unexpected token import'

.babelrc

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

.package.json

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

O snippet env sugerido por @cpojer vai no .package.json?
Desculpe se é realmente óbvio!
Qualquer ajuda seria ótima, obrigado

@JessicaBarclay deve ir na sua configuração .babelrc. Assim:

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

Ahh Obrigado @rlage ! Ordenado :)

FWIW, eu realmente tinha meu .babelrc configurado com presets e plugins corretos em um ambiente de teste como NODE_ENV=test na minha linha de scripts em package.json .

Antes, falhando com "Importação de token inesperada":

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

Depois, transformando arquivos com sucesso:

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

@jlyman

Com base no documento do Jest, ele não deve ser necessário, já que o Jest define o NODE_ENV para teste por padrão.

Nota: Se você estiver usando uma configuração Babel mais complicada, usando a opção env do Babel, lembre-se de que o Jest definirá automaticamente NODE_ENV como teste. Ele não usará a seção de desenvolvimento como o Babel faz por padrão quando nenhum NODE_ENV está definido.

Este .babelrc é o que funcionou para mim:

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

NOTA: parece estranho, mas as chaves de desenvolvimento e teste devem estar presentes, caso contrário, não funcionará.

Então eu só ligo:

node_modules/.bin/jest

ou com package.json:

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

Não há necessidade de definir NODE_ENV para teste.

@laszbalo Interessante, a presença daquele segundo env parece funcionar. Se eu adicionar um ambiente de desenvolvimento e retirar o prefixo NODE_ENV explícito em meus scripts, ele funciona. Eu tinha lido essa parte dos documentos também, mas acabei com essa solução, pois funcionou.

@jlyman qual solução no docs?

@doudounannan Desculpe se não ficou claro. A solução que acabei encontrando foi a que postei aqui . Como @laszbalo disse, vai contra o que os documentos dizem em Usando Babel , mas a solução de @laszbalo ou minha injeção direta de NODE_ENV test parecem funcionar.

Estranhamente, quando eu uso "transformIgnorePatterns": [ ] então o babel transforma meus arquivos testados, mas se eu excluir a opção transformIgnorePatterns então o babel não faz nada ... Eu tenho um .babelrc simples apenas para teste (eu use webpack para produção, mas não para testes de jest):

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

Tive a ideia de https://github.com/facebook/jest/issues/2550#issuecomment -290812720, já que nada mais em # 770 ou aqui parecia ajudar ...

Não importa o que eu faça, é sempre o mesmo erro:

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

    SyntaxError: Unexpected token import

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

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

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

Estou tendo o mesmo problema. Eu adicionei o seguinte à minha brincadeira

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

e agora recebo o seguinte erro quando executo o Jest:

ReferenceError: plugin desconhecido "transform-replace-object-assign" especificado em "/Users/caalcaz/Documents/Projects/Enterprise-app/node_modules/enzyme/.babelrc" em 0, tentativa de resolução em relação a "/ Users / caalcaz / Documentos / Projetos / Enterprise-app / node_modules / enzima "

@calcazar o que há em seu node_modules / enzima / .babelrc?

Eu resolvi isso usando babel-jest _and_ ts-jest. Em package.json:

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

Depois, em .babelrc (que uso apenas para testes)

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

espero que ajude alguém! (Isso é para um aplicativo aurelia, então YMMV)

@thinkOfaNumber

Isso é o que eu vejo. como um FYI, estou executando o Enzyme V3.0

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

@thinkOfaNumber obrigado por postar sua sugestão. Usei-o para descobrir como obter módulos es6 de uma biblioteca externa para serem compilados de brincadeira. A chave está aqui

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

Esta é a parte que eu preciso. Muito obrigado!

@rochapablo no mesmo lugar. Alguma sorte?

Não, por enquanto estou ignorando o teste de arquivo específico que gera o erro

Seguindo. Tenho o mesmo problema e nada parece resolvê-lo até agora.

Seguindo também

@rochapablo Você conseguiu resolver este problema?
Também não consigo testar o componente que tem GiftedChat como filho devido ao problema que você mencionou ...

@todorone , tente adicionar:

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

@rochapablo Obrigado pela dica, mas infelizmente não ajudou. Eu até tentei jogar mais com transformIgnorePatterns regexes, mas não ajudou.

"transform": { "^.+\\.js$": "babel-jest", "^.+\\.jsx?$": "babel-jest" },
adicione o acima para brincadeira

@rochapablo Já experimentou a predefinição jest-expo ? Alguma sorte? Encontrei outro problema de sintaxe com ele & transformIgnorePatterns

Ainda não funciona para mim. Recebo o maldito erro de importação.

@testacode que é um import dinâmico, você adicionou o plugin babel necessário? Veja o final de https://facebook.github.io/jest/docs/en/webpack.html#using -with-webpack-2

@SimenB obrigado, era isso que eu estava perdendo!

É interessante. Alguma atualização recente removeu a adição automática de babel-jest. Então, correndo:

npm install babel-jest --save-dev

e adicionar NADA MAIS na configuração corrigiu o problema para mim. Acho que deveria ficar mais claro em uma mensagem de erro que ele não está mais incluído ...

Resolvi apenas instalando o babel-jest:
npm i babel-jest

Além disso, não se esqueça de criar um arquivo .babelrc com o seguinte conteúdo:

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

Isso funciona para mim:

.babelrc :

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

package.json :

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

@hqro funcionou para mim, obrigado 👍

Para mim, eu tinha isso em meu arquivo .babelrc :

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

E eu só precisava ter certeza de que o ambiente de "teste" usava módulos:

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

@nemoDreamer É melhor não repetir plugins e presets em uma configuração

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

O que quer que eu tente, recebo um erro.

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

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

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

    SyntaxError: Unexpected token import

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

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

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

Aqui estão meus arquivos de configuração.

* .babelrc *

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

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

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

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

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

package.json

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

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

Ao definir a predefinição em .babelrc , certifique-se de que "env" esteja entre colchetes ["env"] , assim:

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

especialmente se você tiver "modules: false" em sua configuração.

Além disso, por padrão, o jest NÃO transforma arquivos em node_modules , cf https://facebook.github.io/jest/docs/en/configuration.html#transformignorepatterns -array-string

É por isso que qualquer import ... não funcionará em node_modules arquivos. Para desativar isso, você pode adicionar:

transformIgnorePatterns: []

para sua configuração de brincadeira.

Espero que isto ajude!

@florentchauveau Obrigado, este trabalho para mim.

@todorone @rochapablo Vocês encontraram uma solução para isso? Até eu estou enfrentando o mesmo problema-

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

    SyntaxError: Unexpected token import

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

Estou recebendo este erro apenas nos testes dos componentes usando
GiftedChat - https://github.com/FaridSafi/react-native-gifted-chat.
Talvez seja porque @expo/react-native-action-sheet está sendo enviado como um módulo ES6 e GiftedChat está usando-o internamente? Mas jest / ts-jest (não tenho certeza) deve lidar com isso se as predefinições forem adicionadas. Aqui está minha configuração do Jest -

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

e o .babelrc -

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

Tentei quase todas as soluções mencionadas acima. Nenhum deles funcionou no meu cenário. Ajuda necessária.

@ omkarjoshi-cc a única coisa que funcionou para mim no momento em que eu estava trabalhando foi adicionar o pacote que estava disparando o erro, que no meu caso era:

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

@rochapablo Sim. Eu tentei. Não funcionou. Existe alguma outra coisa que pode estar faltando? Isso é realmente frustrante 😓

Estou usando o babel 7 e eu também não tive sorte com "transformIgnorePatterns" - tentei muitas expressões regulares diferentes: /

O problema que eu tenho é que uma dependência tem classes es6 nativas nela, e eu tenho uma classe em minha fonte que a estende. Como as "classes es5" transpiladas por Babel não podem estender uma classe nativa, recebo um erro de execução de brincadeira.

Comecei a pensar que de alguma forma "babel / preset-env" está atrapalhando a forma como o código é transpilado para jest (nó de destino), que pode não seguir os destinos do navegador, mas ainda não tenho certeza sobre isso.

Alguém sabe como forçar tudo para es5 por brincadeira ao usar 'present-env' em .babelrc?

A única solução que posso pensar é não usar o babel-jest, executar o webpack (que usa o babel-loader e as regras para quais arquivos transformar funcionaram para mim) e executar jest -> Estou pensando em usar webpack -w e jest olham a tradução ..)

Adicionando

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

trabalhou para mim. Obrigado a @rochapablo 🙌

Estou lutando com esse problema. A minha pasta de saída que está sendo testada deve ter sintaxe ES6 com import etc ou posso simplesmente não testar isso? Não estou vendo nenhum commonjs em meus arquivos / arquivos de saída (usando-o com o react-native)

estou enfrentando o mesmo problema e esta página resolve o problema:
https://babeljs.io/docs/plugins/transform-es2015-modules-commonjs/

Por alguma razão, em vez de babel-jest , usar o seguinte fez funcionar para mim (respeite o transformIgnorePatterns aparentemente)

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

btw este problema deve ser reaberto aqui, certo? muitas pessoas enfrentando dificuldades

No meu caso, esse problema foi causado por ignorar arquivos de teste em minha configuração do babel. Por motivos não relacionados, eu tinha "ignore": ["**/*.test.js"] no meu .babelrc.

A solução foi definir apenas a opção ignorar para o ambiente de produção, ou seja:

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

Como alternativa, você pode especificar um padrão de ignorar especial para o env de teste.

Depois de tentar muito, aqui está o meu caso

1. Certifique-se de ter as versões corretas de babe-jest *
2. certifique-se de ter a configuração .babelrc com predefinições (instaladas anteriormente)
3. se ainda é lançado o erro de "token inesperado", talvez as funções de seta não sejam reconhecidas, este plugin do babel irá ajudá-lo a "transformar propriedades da classe" e também incluí-los em sua configuração do babel.

aqui estão minhas configurações.

.babelrc

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

para enzima (setupTests.js)

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

package.json

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

yarn add --dev babel-jest babel-core regenerator-runtime adicionar isto funcionou para mim

No meu caso, era um problema com o Windows e suas permissões estúpidas, provavelmente não configurando corretamente as variáveis ​​env.
Mudou do git bash para um cmd.exe elevado e começou a trabalhar novamente.

Eu tenho jest definido como script (renomeado test:jest como test ), em meu package.json . No entanto, ao executar npm run test , recebo SyntaxError: Unexpected token import :

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

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

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

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

    SyntaxError: Unexpected token import

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

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

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

    SyntaxError: Unexpected token import

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

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

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

    SyntaxError: Unexpected token import

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

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

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

    SyntaxError: Unexpected token import

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

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

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

Eu também defini um jest.config.js :

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

Estou vendo muitas coisas sobre react-native e transformIgnorePatterns . Felizmente, e infelizmente, eu não uso isso. Que bug indescritível é esse. Preciso definir .babelrc ou adicionar uma diretiva jest na minha package.json . Como minha piada script sabe sobre babel, se for esse o caso? Tentei adicionar .babelrc , no mesmo diretório que contém meus package.json , sem sorte:

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

Nota: se alguém quiser acompanhar meu problema original em relação ao problema acima.

Depois de muito brincar, descobri os seguintes problemas:

• Jest executa o babel 6 por padrão. Babel 6 não procura por um arquivo .babelrc.js . Apenas para um arquivo .babelrc . Se você tiver uma configuração JS em vez de JSON, ele não lerá a configuração e, portanto, não usará nenhum plug-in. Isso resultou em unexpected token: import para mim.
• babel-7-jest é executado em um mecanismo de núcleo Babel 7 antigo, quebrando assim o suporte para plug-ins de propostas mais recentes.
• Parece que npm i -D [email protected] CORRIGE O PROBLEMA COMPLETAMENTE . Eu nem mesmo tenho env.test na minha configuração do babel, nem tenho nenhuma configuração de jest.

Parece que Jest procura babel-core (e portanto ignora @babel/core ), caso contrário, ele volta para Babel 6 e pula sua configuração. Mas quando o último babel-core (versão de bridge) é instalado, ele analisa os módulos ES6 sem qualquer configuração extra.

Obrigado kasvtv! Alterei meu .babelrc.js para .babelrc e instalei npm i -D [email protected] . Agora meus testes são executados com babel-jest

Você pode usar com segurança um arquivo de configuração .js. É que o Babel só lê este tipo de arquivo da versão 7 em diante e você precisa de [email protected] para Jest usar a versão 7 do Babel.

Se alguém estiver interessado, coloquei meus testes de brincadeira + enzima funcionando. Sinta-se à vontade para consultar os arquivos de

Tive um problema semelhante devido a antd e rc-calendar etc. bibliotecas falhando ao importar módulos, a solução foi configurar transformIgnorePatterns

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

Talvez moduleDirectories ajudado:

moduleDirectories: ['node_modules'],

Eu atualizei para a versão mais recente do react-native e tive que atualizar para o babel 7 e agora recebo o mesmo erro.

Adicionar estes node_modules em transformIgnorePatterns não parece fazer mais nada.

No meu caso, é porque não estou mais transpilando módulos com o Babel, e há uma nota no guia de primeiros passos sobre como adicionar isso de volta à parte test do seu babelrc.

@kasvtv @ willb335 Eu uso um truque para fazer o Babel 6 reconhecer .babelrc.js:

package.json

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

Encontro o mesmo problema com use @ material / biblioteca base, alguém poderia fornecer package.json & .babelrc arquivo para resolver. Eu tentei os feedbacks acima, mas eu confundi ...

a solução para mim foi adicionar a predefinição "env" no arquivo .babelrc, então ficou assim
{
"presets": ["env", "es2016", "stage-0", "react"]
}

Usar esta informação de link resolveu meu problema
https://jestjs.io/docs/en/webpack.html

@negarineh seu link não funciona

Usando a solução transformIgnorePatterns fornecida por @haywirez torna meu

SyntaxError: Unexpected token import

erro em um

TypeError: Cannot read property 'DocumentDir' of undefined

errror. Ou seja, o pacote (rn-fetch-blob) agora está indefinido.

Editar:

na verdade, apenas adicionar transformIgnorePatterns: [], ao meu jest.config.js faz com que o SyntaxError mude para o TypeError.

@schumannd Desculpe, eu cometi um erro, o link está redirecionando você para a página agora. Se você definir seu "jest.config.js" com a configuração fornecida no link, ele deve funcionar.
Se o erro for sobre a importação de um arquivo .css, adicionando um arquivo simulado como o exemplo no link ou apenas instalando "identity-obj-proxy" com esta configuração deve funcionar:

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

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

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

Além disso, este é meu arquivo .babelrc no diretório raiz do projeto (test.config.js também deve estar na raiz):

Primeiro, para usar o babel install "babel-jest" e "regenerator-runtime":

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

Em seguida, adicione esta configuração ao arquivo .babelrc:

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

Espero que isto ajude.
https://jestjs.io/docs/en/webpack.html

No meu caso, funciona depois de adicionar o seguinte .babelrc

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

e, em seguida, execute o teste usando NODE_ENV=test jest

Isso só vai ajudar ALGUMAS pessoas.

Meu problema era devido ao fato de não conseguir analisar meu arquivo JS. Em vez disso, usei require .

Rapazes. Nenhuma dessas soluções funciona porque eu não tenho um arquivo babelrc ... apenas babel.config.js. Por favor, como você conserta com babel.config.js? Obrigado

Tentei muitas coisas na discussão acima sobre as configurações de babel , bem como algumas opções extras de outra pesquisa (como esm options) - nada funcionou. A palavra-chave import continuou a dar erro de jest. É triste que testar um módulo com importações es6 seja tão difícil.

Finalmente, isto é o que funcionou para mim: ts-jest

Agora, eu não estou usando nenhum texto digitado em meu código como tal, mas usei ts-jest mesmo assim (já que o texto digitado internamente tem suporte para importações e todas as outras coisas). Isso é apenas para fazer o jest entender o código javascript corretamente.

Seguiu estas etapas:
npm i -D jest typescript ts-jest @types/jest
No arquivo jest.config.js :
transform: { "\\.js$": "ts-jest", transformIgnorePatterns: [], },
Jest pode reclamar que o texto datilografado não permite que js arquivos sejam obedecidos. Adicione o arquivo tsconfig.json com as opções abaixo:
{ "compilerOptions": { "allowJs": true, "module": "commonjs", "noImplicitAny": true, "removeComments": true, "preserveConstEnums": true, "sourceMap": true } }
Todas as configurações e arquivos relacionados a babel removidos. A configuração npm parece com a seguinte:
"scripts": { "test": "jest --runInBand --detectOpenHandles --no-cache --config ./jest.config.js" }
Espero que isso ajude alguém que enfrenta problemas semelhantes com as importações.

Alguém tem um repositório básico com uma configuração de trabalho usando importações JS?

Alguém tem um repositório básico com uma configuração de trabalho usando importações JS?

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

Como alguém que encontrou esta página enquanto procurava por um problema semelhante que provavelmente é irrelevante para a discussão original. Meu problema acabou sendo devido ao uso de importações dinâmicas semelhantes a funções descritas por https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Dynamic_Imports. Isso acabou sendo resolvido adicionando o plugin babel para este recurso disponível em https://github.com/airbnb/babel-plugin-dynamic-import-node e modificando o .babelrc de acordo.

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

Eu apenas removo a opção: { module: false } e funciona

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

adicionar transformIgnorePatterns: [] à configuração do jest e transform-es2015-modules-commonjs ao babelrc resolveu o problema para mim.
jest: ^ 23.1.0,
babel: 6.26.3

@ngmgit mas isso significa que você transpila todos os seus node_modules, o que não é muito ideal ...

No meu caso,
.babelrc não está funcionando, mas resolvi o problema movendo a mesma configuração em .babelrc para babel.config.js .

espero que tenha ajudado!

Nada de TUDO que está aqui funciona para mim. Não acredito que a biblioteca oficial de testes do Facebook para testar aplicativos React seja tão difícil de configurar, sou um desenvolvedor com mais de 8 anos de experiência e passei 5 horas do meu dia sem sucesso passando por tantos problemas e dúvidas no estouro da pilha.

Eu simplesmente não consigo configurar meu aplicativo react para funcionar com jest + react-testing-library

isso APENAS porque jest está gritando toda vez para mim um novo erro de sintaxe que ele não consegue processar. Cada plugin que eu uso resolve um problema e dá outro. Existe maneira de fazer a babel cuidar de tudo?

Sinceramente, terminei com isso, realmente desisti, não estou mais gastando mais tempo nisso, provavelmente cancelarei a adição desta biblioteca no projeto.

Sério, é muito estranho ver que NÃO há configuração padrão para QUALQUER UM que deseja testar um aplicativo react usando jest + react-testing-library.

depois de horas de tentativa e erro com muitas respostas SO e problemas no github, a resposta de @cpojer funcionou para mim! 🙏

ATUALIZADO com o mais recente e melhor com algum contexto adicional que me ajudou:

babel.config.js

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

jest.config.js

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

Dependências:

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

Este problema também pode acontecer quando o jest não é executado no diretório raiz do projeto ...

Se você estiver usando react-native ou jest-expo predefinições e tiver .js arquivos em seu projeto, você deve definir transform para coincidir com a configuração jest.
Usei uma expressão de https://jestjs.io/docs/en/configuration.html#transform -objectstring-pathtotransformer - pathtotransformer-object e funcionou.

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

suporte pnpm

Quero deixar uma nota aqui para os usuários do pnpm ....

O exemplo a seguir não funciona para usuários pnpm porque os caminhos pnpm são diferentes. As expressões regulares acima funcionam apenas com node_modules dirs simplificados.

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

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

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

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

Consertar

Use uma antecipação negativa para a última ocorrência adicionando .* .

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