Question

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

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，其中包含别名＆＃39; d import时，Jest会抛出错误，＆＃34;无法解析模块＆＃39; @ / widgets / widget＆＃39 ;.

根据remarkably specific article以及Jest documentation，解决方案是使用Jest的ModuleNameMapper配置属性来设置匹配的别名＆＃39;。我试图这样做：

的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，但不起作用。我尝试删除transform中Jest配置的package.json属性，但没有效果。我尝试从env.test.plugins删除.babelrc属性，但没效果。同样的错误。

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

Answer 1

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

会将@babel/code-frame转换为

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

不存在。您需要使您的模式更具体，并且

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

请注意开头的其他/。这样它仍将匹配您的@/widgets/widget，但它不会与其他范围的包匹配。

尝试使用@ alias

1 个答案: