babel@7 和 jest 配置

Posted 2023-03-08

【中文标题】babel@7 和 jest 配置

【英文标题】：babel@7 and jest configuration

【发布时间】：2018-12-29 13:16:46

【问题描述】：

也许你可以帮助我？ 我尝试将 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": 
    "transform": 
      "^.+\\.js$": "babel-7-jest",
    ,

得到了

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

但是如果我使用

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

我明白了

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

也许你有一些想法？

【问题讨论】：

我也明白了。围绕此问题的开放 GitHub 问题越来越多，Jest 团队正在采取防御措施并避免提供有效的解决方案来解决此问题。

听到这个消息有点难过

查看我的答案，我已经为我的项目解决了这个问题。希望它也适合你！

【参考方案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，因为现在有official support for it，因此已弃用。 确保以后只使用@babel/xyz 包 - 我安装的babel-core 桥接器是使用最新Babel 7 的“官方”方式。我想这种需求将在未来的某个时候被删除，因为一切都迁移到 Babel 7。 您现在可以使用 ES6+ 功能，包括 import/export，不再需要过时的 require()。

编辑：

如果您想获得更详细的通过/失败测试日志，请将其放入您的jest.config.js：

module.exports = 
    "verbose": true   

【讨论】：

我尝试这样做，但现在得到TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string:github.com/FrontenderMagazineDevelopment/mercury-sdk/tree/…

我已经删除了包：babel-jest jest-cli jest-enzyme regenerator-runtime 并且它开始工作了！雅虎！

请注意，它已在 Jest 24.0.0 中修复，因此现在不需要 "babel-core": "^7.0.0-bridge.0" 或类似的东西（请参阅 jestjs.io/docs/en/getting-started#using-babel）

【参考方案2】：

您可以通过here 找到一个工作示例和教程。

这些都是我的 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"

我必须像安装mentioned on the Jest website 一样安装babel-core@^7.0.0-bridge.0。

我的.babelrc：

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

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

【参考方案3】：

4 天前 Facebook 添加了对 jest 的 babel 7 支持，因此不再需要使用 babel 7 桥接器了。

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

【参考方案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'],
;