时间戳

首页 > 解决方案 > 尝试使用 @alias 时，Jest 无法找到 @babel/code-frame

javascript - 尝试使用 @alias 时，Jest 无法找到 @babel/code-frame

问题描述

import我们的应用程序使用ES2015 样式语法导入文件，利用 Webpack4.6.0对 ES2015 模块的原生支持。我们还使用别名来缩短我们的相对文件路径。

Webpack.conf.js

resolve: {
        extensions: ['.js', '.json', '.less'],
        alias: {
            '@': resolve('public/js'),
            'handlebars': 'handlebars/dist/handlebars.js',
        },
        modules: ['less', 'node_modules']
    },

例子.js

import widget from '@/widgets/widget';

文件结构

- webpack.conf.js
- .babelrc
- test/
- public/
- - js/
- - - widgets/
- - - - widget.js

例如，当我导入example.js具有别名的 exampleimport时，Jest 会抛出错误，“无法解析模块'@/widgets/widget'。

根据一篇非常具体的文章以及Jest 文档，解决方案是使用 Jest 的ModuleNameMapper配置属性来设置匹配别名。我试图这样做：

包.json

  "jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js",
      "@(.*)$": "<rootDir>/public/js/$1"
    },
    "verbose": true,
    "transform": {
      "^.+\\.js$": "babel-jest"
    },
    "globals": {
      "NODE_ENV": "test"
    },
    "moduleFileExtensions": [
      "js"
    ],
    "moduleDirectories": [
      "node_modules"
    ]
  },

以及正确配置 babel：

.babelrc

{
    "presets": [
        [
            "env",
            {
                "modules": false,
                "test": {
                    "plugins": ["transform-es2015-modules-commonjs"]
                }
            }
        ],
        "es2015",
        "stage-2"
    ],
    "plugins": [
        "syntax-dynamic-import"
    ]
}

现在，当我运行 Jest（--no-cache以防万一）时，我得到了这个错误：

test/test.test.js
  ● Test suite failed to run

    Configuration error:

    Could not locate module @babel/code-frame (mapped as /home/calebjay/Documents/ide/public/js/babel/code-frame)

    Please check:

    "moduleNameMapper": {
      "/@(.*)$/": "/home/calebjay/Documents/ide/public/js/$1"
    },
    "resolver": undefined

@babel/code-frame我在 之外找不到任何地方package-lock.json，只是为了咯咯笑，我@{{anything}}从那里删除了所有提及并再次运行测试，结果相同。

开玩笑是不是以某种方式越过了通天塔？如何使用别名让我的测试与 Jest 一起运行？

编辑：为了缩小调用范围@babel/code-frame，我尝试删除es2015和stage-2from .babelrc，但没有效果。我尝试在 中删除transformJest 配置的属性，但package.json没有效果。我尝试从 中删除该env.test.plugins属性.babelrc，但没有效果。同样的错误。

EDIT2：想也许其他一些包需要它，我检查了package.json. 似乎jest-message-util需要@babel/code-frame. 我确实@babel/code-frame在我的 node_modules 中看到了......所以问题可能是小丑在说“好的，@ 的所有实例都变成 public/js”？

标签： javascriptwebpackbabeljsjestjs

解决方案

"@(.*)$": "<rootDir>/public/js/$1"

将转换@babel/code-frame为

"<rootDir>/public/js/babel/code-frame"

这不存在。您需要使您的模式更具体并执行

"@/(.*)$": "<rootDir>/public/js/$1"

注意/开头的附加部分。这样它仍然会匹配你的@/widgets/widget，但它不会匹配其他范围的包。

推荐阅读