How To Configure Jest 28+ To Work With HTML Imports

Published on February 22, 2023 Jest

If you have an application that has HTML imports like this import template from './my-component.html and then attempt to test this code in Jest 28+ (or previous versions, for that matter), you will get a syntax error similar to this one:

SyntaxError: Unexpected token ‘<’ HTML

Fortunately, there is an easy fix. Firstly, you need to install the package jest-html-loader. npm install jest-html-loader -D. Then you need to configure your Jest configuration as follows.

"transform": {
    "^.+\\\\.tsx?$": "ts-jest",
    "^.+\\\\.html?$": "jest-html-loader"
  },

That is all you need to do. Your HTML imports will work and not throw errors during your test process.