How can I use my webpack's html-loader imports in Jest tests?
<p>I am just getting started with the Jest test framework and while straight up unit tests work fine, I am having massive issues testing any component that in its module (ES module via babel+webpack) requires a HTML file.</p>

<p>Here is an example:</p>

<pre><code>import './errorHandler.scss';
import template from './errorHandler.tmpl';

class ErrorHandler {
    ...
</code></pre>

<p>I am loading the component specific SCSS file which I have set in Jest's <code>package.json</code> config to return an empty object but when Jest tries to run the <code>import template from './errorHandler.tmpl';</code> line it breaks saying:</p>

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

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

<p>My Jest config from <code>package.json</code> is as follows:</p>

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

<p>It seems that the webpack <code>html-loader</code> is not working correctly with Jest but I can't find any solution on how to fix this.</p>

<p>Does anyone know how I can make these <code>html-loader</code> <code>import</code>s work in my tests? They load my lodash template markup and i'd rather not have these at times massive HTML chunks in my <code>.js</code> file so i can omit the <code>import template from x</code> part.</p>

<p>PS: This is not a react project, just plain webpack, babel, es6.</p>