簡體   English   中英

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:

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 配置 Babel 和 Jest Jest es6 模塊:意外模塊導入如何在 Jest 中使用 babel-preset-env 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 包含和預設。

值得閱讀升級指南並遵循它。 在此過程中,您可能會找到問題的原因,並確信您的設置是正確的。

我正在分享我的工作 babelrc 和 package.json 文件。 您可以在它的頂部進行調試,以找出您的設置出現問題的地方。

babel.rc

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

包.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"
  }
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM