Como posso usar as importações de html-loader do meu webpack nos testes Jest?

Question

Sep 14, 2016, 08:35 AM

jestjs babeljs ecmascript-6 webpack-html-loader import

Como posso usar as importações de html-loader do meu webpack nos testes Jest?

Estou apenas começando com a estrutura de teste Jest e, embora os testes unitários diretos funcionem bem, estou tendo problemas enormes ao testar qualquer componente que em seu módulo (módulo ES via babel + webpack) exija um arquivo HTML.

Aqui está um exemplo:

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

class ErrorHandler {
    ...

Estou carregando o arquivo SCSS específico do componente que defini no Jestpackage.json config para retornar um objeto vazio, mas quando o Jest tenta executar oimport template from './errorHandler.tmpl'; linha que quebra dizendo:

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

Minha configuração Jest depackage.json é o seguinte:

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

Parece que o webpackhtml-loader não está funcionando corretamente com o Jest, mas não consigo encontrar nenhuma solução sobre como corrigir isso.

Alguém sabe como eu posso fazer issohtml-loader imports funciona nos meus testes? Eles carregam minha marcação de modelo lodash e eu prefiro não ter esses pedaços grandes de HTML às vezes no meu.js arquivo para que eu possa omitir oimport template from x parte.

PS: Este não é um projeto de reação, apenas webpack simples, babel, es6.

leaveComments