15

私は Jest テスト フレームワークを使い始めたばかりで、単体テストは問題なく動作しますが、そのモジュール (babel+webpack 経由の ES モジュール) で HTML ファイルを必要とするコンポーネントをテストする際に大きな問題が発生しています。

以下に例を示します。

import './errorHandler.scss';
import template from './errorHandler.tmpl';

class ErrorHandler {
    ...

package.json空のオブジェクトを返すように Jest の構成で設定したコンポーネント固有の SCSS ファイルをロードしていますが、Jest が次のimport template from './errorHandler.tmpl';行を実行しようとすると、次のように壊れます。

/Users/jannis/Sites/my-app/src/scripts/errorHandler/errorHandler.tmpl.html:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<div class="overlay--top">
                                                                                         ^
    SyntaxError: Unexpected token <

        at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:284:10)

私の Jest 設定package.jsonは次のとおりです。

"jest": {
    "setupTestFrameworkScriptFile": "<rootDir>/test/setupFile.js",
    "moduleDirectories": ["node_modules"],
    "moduleFileExtensions": ["js", "json", "html", "scss"],
    "moduleNameMapper": {
        "^.+\\.scss$": "<rootDir>/test/styleMock.js"
    }
}

webpackhtml-loaderが Jest で正しく動作していないようですが、これを修正する方法が見つかりません。

html-loader importこれらをテストで機能させる方法を知っている人はいますか? それらは私のlodashテンプレートマークアップをロードしますが、.jsファイルにこれらの大量のHTMLチャンクを時々入れたくないので、その部分を省略できますimport template from x。

PS: これは反応プロジェクトではなく、単純な webpack、babel、es6 です。

4

4 に答える 4

22

最近、この特定の問題に遭遇しました。独自の変換プリプロセッサを作成すると解決します。これは私のセットアップでした：

パッケージ.json

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

注: 通常、babel-jest はデフォルトで含まれていますが、カスタム変換プリプロセッサを指定する場合は、手動で含める必要があるようです。

テスト/ユーティリティ/htmlLoader.js:

const htmlLoader = require('html-loader');

module.exports = {
    process(src, filename, config, options) {
        return htmlLoader(src);
    }
}
于 2017-01-09T22:27:33.123 に答える
11

パーティーに少し遅れましたが、そのルートに行きたい場合は、これを行うために、このhtml-loader-jest npm パッケージもあると付け加えたいと思います。

npmでインストールしたら、それをjest構成に追加します

"transform": {
        "^.+\\.js$": "babel-jest",
        "^.+\\.html?$": "html-loader-jest"
    }
于 2019-03-13T14:38:50.343 に答える
0

おそらく、独自のプリプロセッサ ファイルが解決策になるでしょう。

スクリプトプリプロセッサ

カスタムプリプロセッサ

scriptpreprocessor: ソース ファイルの前処理から同期関数を提供するモジュールへのパス。たとえば、ノードでまだサポートされていないモジュールまたはテスト (ES6 クラスなど) で新しい言語機能を使用できるようにしたい場合は、ES6 をコンパイルする多くのトランスパイラの 1 つをプラグインして、 ES5はこちら。

transform-decorators-legacywebpack モジュール ローダーに追加した後、テストで問題が発生したときに、独自のプリプロセッサを作成しました。

于 2016-09-19T11:52:30.860 に答える