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;

Answer 2

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

从文档中

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

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

2 个答案: