如何在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中導入時，可以使用它。

在我的package.json

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

則...

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