Watch mode: tests not executing when template changes

[acalvo]

First of all, thanks a lot for your work integrating Jest with Angular! It was of great help :D.

Having said that, we run into the following problem: our main reason to use Jest is due to its watch mode which runs only the tests affecting uncommited files. It works like a charm when modifying the spec or the TS code of a component, but doesn't seem to react to the changes of the HTML template (which is defined in a separate file and referenced with its relative path in 'templateUrl').

I tested it both locally and with the SimpleComponent given as an example in this repo. Anything we can do to solve it?

[thymikee]

Hm, if the template is referenced with a string and not required per se, it's impossible for Jest to detect that change was connected with specific file. But if you changed the templateUrl to template it should work:

- templateUrl: './path/to/template.html'
+ template: require('./path/to/template.html')

Could you give it a try?

[thymikee]

Oh, actually this is what we're already doing during preprocessing, interesting it doesn't work.

[acalvo]

It does work for me using 'require()' to get the template (thank you!!). But it doesn't when using 'templateUrl' despite of the replacement that is done during the preprocessing. How can it be? 🤔

[thymikee]

Hah, I've dug a bit to find out why (no regrets).

So it doesn't work, because Jest crawls files and create a map (so called HasteMap) without transforming them, as that would be too slow – to speed things up the information about file dependencies (connected paths) is extracted through a regex and then passed to transformers.

Closing, there's a known workaround and a fix would require making HasteMap pluggable (which is probably not gonna happen).