如何编写单元测试以在 Jest 中加载车把模板文件？答案

【问题标题】：How to write unit test for loading handlebars template file in Jest?如何编写单元测试以在 Jest 中加载车把模板文件？
【发布时间】：2017-12-31 06:13:13
【问题描述】：

在我的 reactjs 项目中，我使用把手从模板生成源代码。这些模板保存在文件中。为了将这些文件加载到javascript中，我在webpack中配置了以下配置：

{
        test: /\.handlebars|hbs$/,
        loader:
          'handlebars-loader?helperDirs[]=' +
            path.join(__dirname, '../src/helpers/handlebars')
      },

当我启动生产时它工作正常。但它在我的单元测试中不起作用。我使用jest 作为单元测试框架。我看到有人建议使用Handlebars.registerHelper。我知道它只适用于来自string 的模板。从文件加载模板时如何解决？

【问题讨论】：

标签： javascript reactjs webpack handlebars.js jestjs

【解决方案1】：

我创建了一个预处理器，它只是将把手模板放入一个模块中，因此当通过 es6 导入在 javascript 中导入时，它可以使用。

// preprocessor.js
module.exports = {
  process(src) {
    return `
    const Handlebars = require('handlebars');
    module.exports = \`${src}\`;
    `;
  },
};

然后在我的 package.json 中...

// package.json
"jest": {
    "collectCoverage": true,
    "modulePaths": [
      "./app",
      "./node_modules"
    ],
    "testPathIgnorePatterns": [
      "/node_modules/",
      "/app/bower_components/"
    ],
    "moduleFileExtensions": [
      "js",
      "hbs"
    ],
    "transform": {
      "\\.js$": "babel-jest",
      "\\.hbs$": "<rootDir>/app/scripts/preprocessor.js"
    }
  }

在 src 文件中...

import Mn from 'backbone.marionette';
import template from './template.hbs';

const ToggleList = Mn.CompositeView.extend({
  template,
});

export default ToggleList;

【讨论】：

您的回答对我帮助很大，但在我的情况下，我也需要单元测试来编译模板，所以我直接在处理器中完成了它，而不是导出 src 变量我做了这样的事情：module.exports = Handlebars.compile(`${src}`);
@ikertxu 好主意，非常感谢您的回复。
你能解释一下你是如何做到这一点的吗？ @ikertxu 和示例仍然会导致错误，意外令牌

【解决方案2】：

在使用 Jest 进行测试时加载车把模板时，我发现 jest-handlebars 包解决了我的问题。

来自文档：

npm i jest-handlebars --save-dev
要启用处理器，请将以下规则添加到转换中玩笑配置中的对象：
"jest": {
    // ...
    transform: {
        "\\.hbs$": "jest-handlebars",
    }
    // ...
}
现在所有导入的车把文件都将由处理器编译并导入渲染函数。

【讨论】：