Watcher not working using TypeScript?

[kaosdev]

Seems like that karma auto watch break when using karma-rollup-preprocessor.
The tests are run when i change something, but with no effect.
Indeed if I make a test fail, I see karma running but it will state that tests passes.

It may be a configuration problem, so here I made a small reproduction of the issue https://github.com/kaosdev/karma-rollup-preprocessor-watch-issue

I saw there are other issue related to auto watch not working, but this seems different, and as far as I understand this feature changed recently (maybe with 7.0.4?).

[jlmakes]

Thanks for the reproduction. I removed TypeScript from the project and everything works normally. That narrows things.

[kaosdev]

Can confirm that, using babel watch works correctly. After digging a while I found that @rollup/plugin-typescript uses an internal watcher, maybe this is causing some errors?

[jlmakes]

karma-rollup-preprocessor has its own watcher that manually re-runs Karma, but presently I don't deeply understand how Karma goes about generating/serving temporary files. Although, if it works without the TS plugin, it makes me think the problem lies in how @rollup/plugin-typescript names its output files, perhaps related to the file watcher or a caching strategy. 🤔

There is a bit of file name shuffling in order to get source maps working, and to account for file extension changes. If there is a fix that can be implemented in preprocessor land (as opposed to in the plug-in itself) it likely has to do with that.

There are other users that have been using TypeScript though: https://github.com/jlmakes/karma-rollup-preprocessor/blob/master/CHANGELOG.md#fixed-6 but it looks like it was done using Babel.

[MMMalik]

I can confirm that there is an issue with watching files and official TS plugin @rollup/plugin-typescript. Switching to @rollup/plugin-babel helped in my case:

My plugins inside rollupPreprocessor in karma.conf.js:

plugins: [
	progress(),
	babel( {
		babelHelpers: 'bundled',
		presets: [
			'@babel/preset-env',
			'@babel/preset-typescript',
			'@babel/preset-react'
		],
		extensions: [ '.ts', '.tsx', '.js' ],
		exclude: 'node_modules/**'
	} ),
	nodeResolve( {
		preferBuiltins: false,
		extensions: [ '.ts', '.tsx', '.js' ]
	} ),
	commonJs(),
	polyfillNode()
],

With babel plugin it's just transpilation (no type checking) but I don't think it's a big deal in case of generating test bundle.

[xenobytezero]

So I have been spending a few days looking at this and it looks like it's partially related to @rollup/typescript and partially down to the structure of this preprocessor.

After diving through the @rollup/typescript code, it looks like the plugins "emitted files" cache is maintained at the plugin instance level, not per Rollup run. Since this preprocessor calls rollup.rollup() multiple times with the same config, the instance of the plugin is maintained as does the cache, hence every time the file changes the previously compiled one is emitted again.

I assume something different happens when running rollup.watch() as my main build (using an identical rollup config) works fine.

Is there a way to modify the preprocessor to use rollup.watch() and its internal watcher, while still saying to Karma "hey stuff has changed, you should do what you need to" in the same way as refreshFiles does?

I'm going to keep messing around with this on my end to see if I can make it work, but any pointers would be great.

[xenobytezero]

Follow up, after doing an ugly version of the processor that uses rollup.watch() rather than rollup.rollup() I am getting the output I expect, where the files are rebuilt and refreshing the debug page gives the updated files/test results.

It's very specific to my setup right now but it's doing what I need so I will clean it up and if people need it I can post.

[jlmakes]

@xenobytezero I'd be curious to see your changes. If you have the time, please submit a PR.

[xenobytezero]

The changes are tied up in code it's a little tricky to open source right now, will see what I can do.

[YonatanKra]

@jlmakes I made it work.
I can't find the logic in the tests in order to write tests for it.
How do the tests work? All I see is a bunch of modules that import each other.
Please see this change: #74