Babel+Jest配置 [英] Babel + Jest Configuration

问题描述

问题：

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:

pathsetupTests.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { configure } from 'enzyme';
                                                                                                ^

SyntaxError: Unexpected token {

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

这是我的设置：

package.json

"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-eslint": "^8.2.3",
    "babel-jest": "^23.6.0",
    "babel-loader": "7.1.4",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "6",
    "babel-runtime": "6",
    "css-loader": "0.28.11",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "enzyme-to-json": "^3.3.5",
    "jest": "^23.2.0",
 "jest-enzyme": "^6.0.2",
}

.babelrc

{
  "presets": [ [
    "env", {
      "targets": {
        "node": "current"
      }
    }
  ], "react"],
  "plugins": [
    [
      "react-css-modules",
      {
        "filetypes": {
          ".scss": {
            "syntax": "postcss-scss"
          }
        },
        "webpackHotModuleReloading": true
      }
    ],
    ["transform-class-properties", { "spec": true }],
    ["transform-object-rest-spread"],
    ["emotion"]
  ],
  "env": {
    "test": {
      "presets": [
        "jest",
        "react",
        [
          "env",
          {
            "debug": false,
            "modules": "commonjs",
            "targets": {
              "node": "current"
            },
            "useBuiltIns": true
          }
        ]
      ],
      "plugins": [
        "transform-es2015-modules-commonjs",
        [
          "react-css-modules",
          {
            "generateScopedName": "[local]",
            "filetypes": {
                  ".scss": {
                      "syntax": "postcss-scss",
                      "plugins": [
                          "postcss-nested"
                      ]
                  }
              }
          }
        ]
      ]
    }
  }
}

jest.config.js

module.exports = {
  rootDir: 'client',
  moduleNameMapper: {
    '\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js',
    '\.(scss)$': 'identity-obj-proxy',
    '<rootDir>/config.js': '<rootDir>/__mocks__/config.js'
  },
  setupFiles: ['<rootDir>/setupTests.js'],
  setupTestFrameworkScriptFile: '../node_modules/jest-enzyme/lib/index.js',
  transform: {}
};

我已通读：

https://jestjs.io/docs/en/getting-started.html#using-babel https://github.com/facebook/jest/issues/5164#issuecomment-366139663 Configuring Babel and Jest Jest es6 modules: unexpected module import How to use babel-preset-env with Jest https://github.com/facebook/jest/issues/1654

我使用Yarn 1.9.1。我已经删除并重新安装了我的依赖项。

我仍然不会迷失。

推荐答案

您仍在使用Babel 6-我建议您阅读Babel 7升级文档https://babeljs.io/docs/en/v7-migration

发生了很大变化，特别是在预置方面，现在已经简化。

这里有一个工具可以帮助您入门：https://github.com/babel/babel-upgrade-此工具将查看您的Package.json并自动升级大多数Babel Include和预设。

值得阅读升级指南并遵循它。您可能会在整个过程中找到问题的原因，并确信您的设置是正确的。

这篇关于Babel+Jest配置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！