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();
})
});