Use ngtemplate-loader with JEST transform

[adyz]

Hello,

I'm new to AngularJS and I recently started working on an old codebase.

I've simplified the code in order to have the minimum required dependencies to reproduce what I'm trying to solve.

Code: https://github.com/adyz/old-angular-stuff Install locally: npm install Run locally: npm start Test locally: npm test

My Webpack file has:

    rules: [

      { 
        test: /\.ts$/, 
        loader: "ts-loader"
      },
      { 
        test: /\.ts$/, 
        enforce: 'pre',
        use: [{ loader:'baggage-loader?[file].html&[file].css'  }]
      },
      {
        test: /\.html$/,
        use: [
          { loader: 'ngtemplate-loader?requireAngular' },
          { loader: 'html-loader' }
        ]
      }
    ]

With this I am able to load a HTML template using the templateUrl syntax like so:templateUrl: require('./kcd-hello.html'),

This is very nice and it works as expected.

The problem is that I want to do the same transformations or to apply the same loaders in JEST via the transform property that kind of works the same way as Webpack does, but not quite.

This is my current jest.config.js file:

module.exports = {
    "roots": ["app"],
    "moduleNameMapper": {
        "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
    },
    "transform": {
        "^.+\\.ts?$": "ts-jest",
        "^.+\\.html$": "<rootDir>/jest.htmlLoader.js"
    },
};

The ts-jest works without no artifacts, but the html-loader has a twist. You need to create a new file that requires the html-loader and it returns a process function. Found this solution here: https://stackoverflow.com/questions/39483893/how-can-i-use-my-webpacks-html-loader-imports-in-jest-tests That's why the "^.+\\.html$": "<rootDir>/jest.htmlLoader.js"

Now, I've tried the same thing with ngtemplate-loader but I can't seem to make this work for multiple reasons, but one bottleneck I've had is that when I do const ngtemplateLoader = require('ngtemplate-loader?requireAngular')node already gives me an error.

What would you recommend to do in this case so that my test run with the same code as in Webpack?

Could I use this as the html-loader? How can I pass the options to the ngtemplate-loader like requireAngular or other options?

If you want to see that the test pass you can change from templateUrl to template in theapp/directives/kcd-hello.ts file.

Thank you!

[woram-nyansa]

Did you have any success figuring this out?