How to write unit test for loading handlebars template file in Jest?

Question

In my reactjs project, I am using handlebars to generate source code from the template. These templates are saved in files. In order to load these files into javascript, I configured below configuration in webpack:

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

it works fine when I launch the production. But it doesn't work in my unit tests. I am using jest as unit test framework. I have seen some people suggest to use Handlebars.registerHelper. I know it works only for the template from string. How to solve the issue when I load the template from files?

Answer 1

I created a preprocessor that simply put the handlebars template into a module so when imported in javascript via an es6 import, it can be used.

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

Then in my 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"
    }
  }

In a src file...

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

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

export default ToggleList;

Answer 2

When loading handlebar templates while testing with Jest, I found that the jest-handlebars package solved my problem.

From the docs:

npm i jest-handlebars --save-dev

To enable the processor please add the following rule to the transform object in your jest configuration:

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

Now all imported handlebars files will get compiled by the processor and the render function is imported.