Ich fange gerade erst mit dem Jest-Test-Framework an und während die direkten Komponententests einwandfrei funktionieren, treten beim Testen von Komponenten, die in ihrem Modul (ES-Modul über babel + webpack) eine HTML-Datei erfordern, massive Probleme auf.

Hier ist ein Beispiel

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

class ErrorHandler {
    ...

Ich lade die komponentenspezifische SCSS-Datei, die ich in Jests @ gesetzt hapackage.json config, um ein leeres Objekt zurückzugeben, aber wenn Jest versucht, das @ auszuführimport template from './errorHandler.tmpl'; Zeile es bricht mit der Aufschrift:

/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)

Meine Jest-Konfiguration vonpackage.json ist wie folgt

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

Es scheint, dass das Webpackhtml-loader funktioniert nicht richtig mit Jest, aber ich kann keine Lösung finden, wie dies behoben werden kann.

Weiß jemand, wie ich diese machen kannhtml-loader imports funktionieren in meinen tests? Sie laden mein Markup für Lodash-Vorlagen und ich möchte diese manchmal massiven HTML-Chunks lieber nicht in meinem @ habe.js Datei, damit ich das @ weglassen kaimport template from x part.

PS: Dies ist kein Reaktionsprojekt, nur ein einfaches Webpack, babel, es6.