【Jest】htmlファイルをロードする

JestでUIコンポーネントのテストをするとき、そのコンポーネントがhtmlファイルをimportしている場合、以下のようなエラーが発生する

SyntaxError: Unexpected token '<'
 import html from "./sample.html"
        | ^

Jestでテストする際にJavaScriptとして扱えるように、どこかしらでhtml-loaderを噛ませる必要があるみたい

これを解決するために、Jestのcode transformationを利用する

jestjs.io

code transformationは、Node.js でサポートされない構文 (JSX、TypeScript、Vue テンプレートなど) をプレーンな JavaScript に変換するためのもので、 公開されているローダーや自作のローダーを使ってJavaScriptに変換することができる

まずは、ローダーを用意する

htmlの場合は、webpackのhtml-loaderをすでに利用しているので、それをここでも使う

const htmlLoader = require('html-loader');

module.exports = {
  process(src) {
    return {
      code: `module.exports = ${htmlLoader(src)};`,
    };
  }
}

これをjest.config.jsで利用するように設定する

// jest.config.js

module.exports = {
  ....
  transform: {
    "^.+\\.js$": "babel-jest",
    "^.+\\.html$": "<rootDir>/test/utils/htmlLoader.js",
  }

これでHTMLがエラーなく読み込めるようになった