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

Question

在我的reactjs项目中，我使用handlebars从模板生成源代码。这些模板保存在文件中。为了将这些文件加载到javascript中，我在

webpack

中配置了以下配置：

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

当我启动生产时它工作得很好。但它在我的单元测试中不起作用。我使用

jest

作为单元测试框架。我看到有人建议使用

Handlebars.registerHelper

。我知道它仅适用于

string

中的模板。如何解决从文件加载模板时出现的问题？

Answer 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;

Answer 2

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

来自文档：

npm i jest-handlebars --save-dev

要启用处理器，请将以下规则添加到转换中 你的玩笑配置中的对象：

"jest": {
    // ...
    transform: {
        "\\.hbs$": "jest-handlebars",
    }
    // ...
}

现在所有导入的车把文件都将由处理器编译 并导入渲染函数。

Answer 3

如何在 Jest 中使用“express-handlebars”？

我使用 res.render("templateName",{data:"example"})

但是 Jest 无法理解并且总是返回 500 代码错误。

如果我使用 res.send 就可以了，但是当我使用 res.render 方法时，找不到 JEST。

有人知道我该如何解决这个问题吗？