Babel + Jest配置

Question

问题是：

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:

path\setupTests.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。我已经删除并重新安装了我的依赖项。

但我还是迷失了方向。

Answer 1

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

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

这里有一个帮助您入门的工具：https://github.com/babel/babel-upgrade --它将查看您的package.json并自动升级您的babel包含和预置。

这是值得阅读的升级指南和遵循它。您可能会发现您的问题的原因，并相信您的设置是正确的。

Answer 2

我正在分享我的工作宝贝和package.json文件。你可以在上面进行调试，找出你的安装程序在哪里出错。

babel.rc

 {
  "presets": [
    [
      "@babel/preset-env",
      {
        "debug": false,
        "targets": {
          "browsers": ["last 3 versions"]
        }
      }
    ]
  ]
}

Package.JSON

{
  "name": "babelWithJest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "npm": "^6.4.1"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0-beta.54",
    "@babel/preset-env": "^7.0.0-beta.54",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^23.4.0",
    "bili": "^3.1.2",
    "jest": "^23.4.1",
    "regenerator-runtime": "^0.12.0"
  }
}