在Jest测试中使用webpack的worker-loader解决导入问题

Question

我正在写一个Jest测试，在解析这个使用了webpack的worker-loader的导入时遇到了问题

import ImageInfoWorker from 'worker-loader?name=image_info!@WORKERS/image-info';

我还有其他一些别名可以在我的测试中正确解析，例如：

import Store from '@SUPPORT/store';
import * as api from '@SUPPORT/api';

下面是来自package.json的相关代码片段

  "jest": {
    "moduleFileExtensions": ["js", "jsx"],
    "moduleNameMapper": {
      "^@CSS/(.*)$": "<rootDir>/css/$1",
      "^@COMPONENTS/(.*)$": "<rootDir>/js/components/$1",
      "^@MODELS/(.*)$": "<rootDir>/js/models/$1",
      "^@STORES/(.*)$": "<rootDir>/js/stores/$1",
      "^@SUPPORT/(.*)$": "<rootDir>/js/support/$1",
      "^(.*?)@WORKERS/(.*)$": "$1<rootDir>/js/workers/$2"
  }
}

下面是我的webpack配置的resolve部分：

        resolve: {
          extensions: ['.js', '.jsx'],
          modules: [process.env.NODE_PATH, 'node_modules'],
          alias: {
            '@CSS':        path.join(projectRoot, 'css'),
            '@COMPONENTS': path.join(projectRoot, 'js', 'components'),
            '@MODELS':     path.join(projectRoot, 'js', 'models'),
            '@STORES':     path.join(projectRoot, 'js', 'stores'),
            '@SUPPORT':    path.join(projectRoot, 'js', 'support'),
            '@WORKERS':    path.join(projectRoot, 'js', 'workers')
        }
      },

Answer 1

如果不需要解析路径，可以使用"moduleNameMapper"忽略导入。

首先，创建一个包含export default ''的空模块。

接下来，将以下内容添加到package.json中

"jest": {
    "moduleNameMapper": {
        "^worker-plugin/loader.+$": "<rootDir>/EmptyModule"
    }
}

Answer 2

这个solution对我很有效。

在名为__mocks__的文件夹中创建您需要的具有模拟实现的workerMock.js文件(当然，您可以在您喜欢的任何地方创建它)：

module.exports = Object.create(null);

然后在您的jest配置中添加以下配置：

"moduleNameMapper": {
  "\\.worker.js":"<rootDir>/__mocks__/workerMock.js"
}

Answer 3

根据cpojer的说法，Jest不支持web-workers。你应该使用模仿，阅读更多的here