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

Question

我们的应用程序使用importES2015样式语法导入文件,利用Webpack 4.6.0本机支持ES2015模块.我们还使用别名来缩短相对文件路径.

Webpack.conf.js

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

example.js

import widget from '@/widgets/widget';

文件结构

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

当我导入例如example.js具有别名的时候import,Jest会抛出一个错误,"无法解析模块'@/widgets/widget'.

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

的package.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-2从.babelrc,没有效果.我尝试删除transformJest配置的属性package.json,没有效果.我尝试删除该env.test.plugins属性.babelrc,没有效果.同样的错误.

EDIT2:想想也许其他一些包需要它,我查了一下package.json.这似乎是jest-message-util必要的@babel/code-frame.我确实@babel/code-frame在我的node_modules中看到了...所以也许问题是jester说"好吧,@的所有实例都变成了public/js"？

Answer 1

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

将转换@babel/code-frame为

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

哪个不存在.您需要使您的模式更具体,并且确实如此

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

请注意/开头的附加内容.这样它仍将匹配你的@/widgets/widget,但它不会匹配其他范围的包.