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

Question

在我的 reactjs 项目中，我使用把手从模板生成源代码。这些模板保存在文件中。为了将这些文件加载​​到 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;