Как я могу использовать импорт html-загрузчика моего веб-пакета в тестах Jest?

Я только начинаю с тестовой средой Jest, и хотя прямые модульные тесты работают нормально, у меня возникают серьезные проблемы с тестированием любого компонента, для которого в его модуле (модуль ES через babel+webpack) требуется файл HTML.

Вот пример:

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

class ErrorHandler {
    ...

Я загружаю файл SCSS для конкретного компонента, который я установил в Jest's package.json config, чтобы вернуть пустой объект, но когда 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"
    }
}

Кажется, что веб-пакет html-loader с Jest работает неправильно, но я не могу найти решение, как это исправить.

Кто-нибудь знает, как я могу сделать это html-loaderimportработа в моих тестах? Они загружают мою разметку шаблона lodash, и я бы предпочел, чтобы эти временные массивные фрагменты HTML не были в моем .js файл, чтобы я мог опустить import template from x часть.

PS: Это не реактивный проект, просто простой веб-пакет, babel, es6.

Источник

6 ответов

Недавно я столкнулся с этой конкретной проблемой, и создание собственного препроцессора преобразования решит ее. Это была моя установка:

package.json

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

ПРИМЕЧАНИЕ: babel-jest обычно включен по умолчанию, но если вы указываете собственный препроцессор преобразования, вам, кажется, придется включить его вручную.

тест / Utils/htmlLoader.js:

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

module.exports = {
    process(src, filename, config, options) {
        return htmlLoader(src);
    }
}
Источник

Немного опоздал на вечеринку, но хотел добавить, что для этого есть пакет html-loader-jest npm, если вы хотите пойти по этому пути.

Как только вы установите npm, вы добавите его в конфигурацию jest с помощью

"transform": {
        "^.+\\.js$": "babel-jest",
        "^.+\\.html?$": "html-loader-jest"
    }
Источник

Для Jest > 28.xx сhtml-loader:

  1. Создайте пользовательский преобразователь, как описано здесь .
      jest/html-loader.js

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

module.exports = {
  process(sourceText) {
    return {
      code: `module.exports = ${htmlLoader(sourceText)};`,
    };
  },
};
  1. Добавьте его в конфигурацию шутки.
      jest.config.js

      ...

  // A map from regular expressions to paths to transformers
  transform: {
    "^.+\\.html$": "<rootDir>/jest/html-loader.js",
  },

...

Это исправит ошибку: Недопустимое возвращаемое значение: process()или/и processAsync()метод преобразователя кода, найденный в "<PATH>", должен возвращать объект или промис, разрешающий объект.

Источник

Для Jest 28+ вы можете использовать jest-html-loader , чтобы заставить Jest работать с кодом, для которого требуются HTML-файлы.

      npm install --save-dev jest-html-loader

В вашей конфигурации jest добавьте его в качестве преобразователя для файлов .HTML:

      "transform": {
  "^.+\\.html?$": "jest-html-loader"
},
Источник

Может быть, ваш собственный файл препроцессора будет решением:

ScriptPreprocessor

Таможни препроцессоры

scriptpreprocessor: путь к модулю, который обеспечивает синхронную функцию из предварительной обработки исходных файлов. Например, если вы хотите иметь возможность использовать новую языковую функцию в своих модулях или тестах, которая еще не поддерживается узлом (например, классы ES6), вы можете подключить один из многих транспортеров, которые компилируют ES6 для ES5 здесь.

Я создал свой собственный препроцессор, когда у меня возникли проблемы с тестами после добавления transform-decorators-legacy к моим загрузчикам модуля webpack.

Источник

html-loader-jestу меня не работает. Мое решение для этого:

      "transform": {
  '\\.(html)$': '<rootDir>/htmlTemplateMock.html'
}

htmlTemplateMock.html пустой файл

Источник
Другие вопросы по тегам