Jest测试Babel错误：插件/预设文件不允许导出对象。

Question

我正在使用非常更新的依赖栈（2017年12月）。当使用Jest进行同构React测试时，测试套件一直失败，并显示以下错误：

* Test suite failed to run
[BABEL] /__tests__/router.test.js: Plugin/Preset files are not allowed to
export objects, only functions.

这是我的依赖关系：

"dependencies": {
    "axios": "^0.17.1",
    "babel-polyfill": "^6.26.0",
    "cors": "^2.8.4",
    "express": "^4.16.2",
    "react": "^16.1.1",
    "react-dom": "^16.1.1",
    "react-router-dom": "^4.2.2"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0-beta.35",
    "babel-cli": "^6.26.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^8.0.2",
    "babel-jest": "^22.0.1",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "enzyme": "^3.2.0",
    "enzyme-adapter-react-16": "^1.1.0",
    "enzyme-to-json": "^3.2.2",
    "eslint": "^4.11.0",
    "eslint-plugin-react": "^7.5.1",
    "html-webpack-plugin": "^2.30.1",
    "jest": "^21.2.1",
    "nodemon": "^1.11.0",
    "parallelshell": "^3.0.2",
    "react-test-renderer": "^16.2.0",
    "regenerator-runtime": "^0.11.1",
    "supertest": "^3.0.0",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.4"
  },
  "peerDependencies": {
    "babel-core": "^7.0.0-0"
  }

.babelrc：

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

有人知道为什么Jest无法运行吗？

- edlee

---

通常混用Babel 6和7会导致问题。是什么促使你在这里使用7？ - loganfsmyth

这不是一个生产项目，Babel Bridge旨在解决6和7之间的任何问题。但是，如果没有人知道发生了什么，降级可能会解决这个问题。 - edlee

“babel bridge旨在解决6和7之间的任何问题”，但实际上它并不是这样。它只是允许Jest加载Babel 7。如果您正在使用Babel 7，则应该使用@babel/preset-react等工具。 - loganfsmyth

Answer 1

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

将最后一段名为"test"的代码块添加到你的babel.rc中。 以下是我参考的.babelrc代码。

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

这是我从命令行输出的内容

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        9.264s
Ran all test suites.
Done in 12.99s.

- Antoine Thornton

---

我希望我能给你的回复点赞25次；我感觉它刚刚节省了我几个小时的时间。感谢你抽出时间回复！ - andyengle

这个让我节省了很多时间。 - EspressoBeans

Answer 2

babel bridge旨在解决Babel 6和7之间的任何问题。

这完全不是bridge包所做的。它只允许使用babel-core的工具通过到@babel/core。整个包只有这一行代码。

如果你正在使用@babel/core，则需要使用适用于Babel 7的插件。这意味着babel-preset-react应更改为@babel/preset-react，@babel/preset-env也是如此，您的.babelrc应该是：

{
  "presets": [
    "@babel/env",
    "@babel/react",
  ]
}

同样地，babel-polyfill 应该改为 @babel/polyfill。

由于Babel 7仍处于不稳定的测试版阶段，因此目前还没有很好的文档资料可供参考。

- loganfsmyth

---

解决了我的问题。非常感谢。 - Tarun

Answer 3

在配置 jest 与 babel-6 兼容的过程中，我也遇到了同样的挑战。

这里详细解释了完整的过程

但总的来说，以下这些依赖和设置让我成功将 babel-jest 应用于处理我的 **.js 文件：

// package.json

  "devDependencies": {
    "babel-core": "6.26.0",
    "babel-jest": "21.2.0",
    "babel-loader": "7.1.2",
    "babel-preset-env": "1.6.0",
    "babel-preset-react": "6.24.1",
    "babel-preset-stage-0": "6.24.1",
    "jest": "21.2.1",
    "webpack": "3.6.0"
  },
  "jest": {
    "transform": {
      "^.+\\.jsx?$": "babel-jest"
    }
  }

// .babelrc

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

- MwamiTovi