4

Rails が提供する AngularJS (v.1.7) アプリがあります。Sprockets から Webpack に移行しました。Jasmine テストを Jest に移行しようとしているとき。html-loaderディレクティブ テンプレートをディレクティブにインポートするために使用しているときに問題が発生しました。

テンプレートをインポートする 1 つの単純なディレクティブのhtml-loader場合、エラーで失敗するため、Jest はテストのロードに失敗します。

TypeError: Cannot read property 'query' of undefined

      1 | const htmlLoader = require("html-loader");
      2 | module.exports = {
    > 3 |   process: (src) => htmlLoader(src)
        |                     ^
      4 | };
      5 |
    at getOptions (node_modules/html-loader/node_modules/loader-utils/lib/getOptions.js:6:31)

私はこの SO 投稿この npm パッケージ html-loader-jest の推奨事項に従っていました。私のでは、次の構成package.jsonを追加しましたjest

  "jest": {
    "moduleFileExtensions": [
      "js",
      "html"
    ],
    "transform": {
      "^.+\\.js$": "babel-jest",
      "^.+\\.html$": "<rootDir>/jest/support/html_loader.js"
    },
    ...
  }

そしてサポートファイル

// jest/support/html_loader.js
const htmlLoader = require("html-loader");
module.exports = {
  process: (src) => htmlLoader(src) 
};

html-loaderスタックトレースは(node_modulesから)私を指しています

// node_modules/html-loader/node_modules/loader-utils/lib/getOptions.js
function getOptions(loaderContext) {
  const query = loaderContext.query;
...

Jest の実行中にここをトレースすると、loaderContext(エラー レポートとして) これが未定義であることがわかります。

私の質問は...これはこれを使用する正しい方法htmlLoaderですか? もしそうなら、私は何になると期待すべきloaderContextですか?その価値を提供するために冗談を言う方法はありますか? または、これはhtmlLoader、実際の Webpack パイプラインの外部で呼び出されるはずの方法ではありません。

この問題は、経由で実行しているときにのみ発生しjestます。 webpackアプリのすべてのアセットを適切にコンパイルします。

ライブラリのバージョン

html-loader: 1.0.0
webpack: 4.42.1
jest: 25.2.4

コード(わかりやすくするため)

// mailer.js
import angular from "angular";
import ngInject from "@js/ng-inject";
import template from "./index.html";

const mailer = ngInject(function () {
  return {
    restrict: "E",
    scope: {
      text: "@",
    },
    template: template,
  };
});
angular.module("app-directives").directive("mailer", mailer);
<!-- index.html -->
<a>{{text}}</a>
// mailer.test.js
import expect from "expect";
import "./mailer";

describe("app-directives.mailer", function () {
  it("works", () => {
    expect(true).toBeTruthy();
  })
});
4

1 に答える 1