webpack4+babel7 に移行後、karma+inject-loaderが正しく動作しない

環境

• NPM＠7.0.14
• Node.js＠15.3.0
• webpack＠4.46.0
• babel＠7.0.0
• karma＠6.3.9
• inject-loader＠4.0.1

事象

表題の通り。

karma startで実行されるテストコード内でrequire('inject-loader!@/api/auth')等、動的インポートを行おうとすると、「パス間違ってねぇか？」って言われちゃう。なぜかinject-loader/dist!@/api/authとして認識される。distはどっから来た？
※ '@' は'./src' ディレクトリの alias として、webpack.config で指定してる。

console.log

$ npm run unit

> cross-env BABEL_ENV=test karma start test/unit/karma.conf --single-run

～・～・～ 中略 ～・～・～

WARNING in ./src/api/auth.js (./node_modules/inject-loader/dist!./src/api/auth.js)
Module Warning (from ./node_modules/inject-loader/dist/index.js):
(Emitted value instead of an instance of Error) The module you are trying to inject into doesn't have any dependencies. Are you sure you want to do this?
 @ ./test/unit/specs/api/auth.spec.js 5:0-48 9:18-26
 @ ./test/unit/specs sync \.spec$
 @ ./test/unit/index.js

ERROR in ./src/api/auth.js (./node_modules/inject-loader/dist!./src/api/auth.js) 237:4
Module parse failed: 'import' and 'export' may only appear at the top level (237:4)
File was processed with these loaders:
 * ./node_modules/inject-loader/dist/index.js
 * ./node_modules/babel-loader/lib/index.js
 * ./node_modules/eslint-loader/index.js
You may need an additional loader to handle the result of these loaders.
|     }();
|
>     import _Promise from "@babel/runtime-corejs2/core-js/promise";
|     import client from './client';
|     export default {
 @ ./test/unit/specs/api/auth.spec.js 5:0-48 9:18-26
 @ ./test/unit/specs sync \.spec$
 @ ./test/unit/index.js

～・～・～ 中略 ～・～・～

テストコード

auth.spec.js

/* eslint-disable import/no-webpack-loader-syntax */
import axios from 'axios'

const mockAuth = adapter => {
  const injector = require('inject-loader!@/api/auth')
  const clienMock = injector({ 
    './client': axios.create({ adapter })
  })
  return clienMock.default
}
// ～・～・～ 中略 ～・～・～

webpack.config.js

module.exports = {
// ～・～・～ 中略 ～・～・～
  resolve: {
    // options for resolving module requests
    // (does not apply to resolving of loaders)
    modules: ["node_modules"],
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }
  },
// ～・～・～ 中略 ～・～・～

結論

• @babel/plugin-transform-modules-commonjs を導入する

bash

# インストール
＄npm install --save-dev @babel/plugin-transform-modules-commonjs

.babelrc

// babel にプラグインを認識させる
{
// ～・～・～ 中略 ～・～・～
  "env": {
    "test": {
      "presets": [
        [
          "@babel/preset-env",
          {
            "modules": "commonjs"
          }
        ]
      ],
// ～・～・～ 中略 ～・～・～
    }
  }
}

以上

備考

• OSS界隈、途中のバージョンを飛ばして新しいバージョンに移行したりすると、途中のバージョンで必要になったプラグインの情報が公式ドキュメントやコミュニティ等で「入れてて当然」な雰囲気があり、何が必要なのか全くわからん。しかし、その情報を纏めるのも大変だしね。考えもんですなぁ。

参考