Babel@7和Jest配置

Question

也许你可以帮助我吗？ 我想要配置jest来使用babel@7 所以现在有以下内容：

"jest": "^23.4.1",
"@babel/core": "^7.0.0-beta.54",
"babel-7-jest": "^21.3.3",
"babel-jest": "^20.0.3",

在package.json文件中配置jest

"jest": {
    "transform": {
      "^.+\\.js$": "babel-7-jest",
    },

并且获得了 <\p>

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string

但是如果我使用

"jest": {
    "transform": {
      "^.+\\.js$": "babel-jest",
    },

I got

Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel.

Babel 配置: https://gist.github.com/SilentImp/1506e9c26d16d9839a4469c6f3ae5c4d

你可能有一些想法？

- SilentImp

---

我也遇到了这个问题。关于这个问题，GitHub上的开放问题数量正在增加，Jest团队正在采取防御措施，避免提供可行的解决方案来修复它。 - user9993

有点难过听到这个消息。 - SilentImp

看看我的答案，我已经为我的项目解决了这个问题。希望它对你也有用！ - user9993

Answer 1

我相信我已经找到了一个可行的解决方案（不需要感谢Jest团队提供有问题的文档并回避这个问题的GitHub问题）。

您需要在package.json文件的devDependencies部分中添加以下内容：

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

在你的.babelrc文件中，需要添加以下内容：

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

在我的特定项目中，我不需要使用Jest配置文件，因此我删除了空的jest.config.js文件。

关键点：

- 删除babel-7-jest，因为它已被弃用，现在有官方支持。 - 确保只使用@babel/xyz包-我安装的babel-core桥接器是使用最新Babel 7的"官方"方式。随着一切向Babel 7迁移，我想象这种需求会在未来某个时候被移除。 - 您现在可以使用ES6+功能，包括import/export，不再需要过时的require()。

编辑：

如果您想要更详细的测试结果日志，请在您的jest.config.js文件中加入以下内容：

module.exports = {
    "verbose": true   
}

- user9993

---

我尝试着去做，但是现在遇到了 TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string 错误： https://github.com/FrontenderMagazineDevelopment/mercury-sdk/tree/feature/ISSUE-1/updateBabel - SilentImp

我已经移除了以下的包： babel-jest jest-cli jest-enzyme regenerator-runtime 现在它可以正常工作了！耶！ - SilentImp

请注意，这个问题在 Jest 24.0.0 中已经得到解决，因此现在不需要 "babel-core": "^7.0.0-bridge.0" 或类似的东西了（请参见 https://jestjs.io/docs/en/getting-started#using-babel）。 - Arnaud Valle

Answer 2

您可以在此处找到一个可运行的示例和教程。

这些都是我的Babel软件包:

"@babel/core": "^7.1.2",
"@babel/node": "^7.0.0",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"@babel/register": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^23.6.0",
"babel-loader": "^8.0.4"

我不得不安装babel-core@^7.0.0-bridge.0，就像 Jest网站上提到的那样。

我的.babelrc文件：

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

我的npm脚本是：jest --config ./test/jest.config.json，在升级Babel 7后没有改变。

- Robin Wieruch

Answer 3

4天前，Facebook为Jest添加了Babel 7的支持，因此不再需要使用Babel 7桥接程序。

更多信息请参见： https://github.com/facebook/jest/blob/master/README.md#using-babel

- Idan Gozlan

Answer 4

我曾经为这个问题苦苦挣扎了几天，直到看到这篇文章才得以解决。非常感谢每个人分享他们的解决方案！

以下是我的配置，为了更好的理解，这是一个使用Jest的VueJs应用程序。

希望能对某些人有所帮助 :)

我的测试npm脚本

"test:unit": "jest --config ./jest.config.js"

我的Babel包

    "@babel/core": "^7.6.2",
    "babel-loader": "^8.0.4",
    "babel-core": "^7.0.0-bridge.0",
    "@babel/preset-env": "^7.6.2",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.6.0",
    "@vue/cli-plugin-babel": "^3.11.0",

babel.config.js

module.exports = {
    presets: [
        [
            '@babel/preset-env',
            {
                debug: false,
                targets: {
                    browsers: ['last 3 versions'],
                },
            },
        ],
    ],
};

jest.confg.js

module.exports = {
    verbose: true,
    moduleFileExtensions: ['js', 'json', 'vue'],
    moduleNameMapper: {
        '^@/(.*)$': '<rootDir>/src/$1',
    },
    transform: {
        '^.+\\.vue$': 'vue-jest',
        '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
        '^.+\\.(js|jsx)?$': 'babel-jest',
    },
    transformIgnorePatterns: ['<rootDir>/node_modules/'],
    testMatch: ['**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'],
    collectCoverage: false,
    collectCoverageFrom: ['src/components/*.{js,vue}', '!**/node_modules/**'],
    coverageReporters: ['html', 'text-summary'],
};

- Alan Richards