Comments (19)
I am able to mostly avoid this problem by creating a single entry point for tests.
Create an entry point like: find src -name '*.spec.js' | awk '{print "export * from '\''./" $0 "'\'';"}' > karma-entry.spec.js
Then instead of including /src/**/*.js
include only karma-entry.spec.js
It would be nice if the preprocessor could handle this automatically, but incorporating this in our npm script seems to solve the problem for us.
from karma-rollup-preprocessor.
This issue also makes debugging tests in a browser very difficult. Since the source is duplicated, sourcemaps are unreliable, making it is difficult to put breakpoints in the right place.
from karma-rollup-preprocessor.
@Lalem001 Thanks for the hint with the globbing. Luckily I was already in the situation of having an own "resolver" plugin in my project so I could extend it for my needs. Maybe it helps somebody, here the rough steps that I did:
Step 1: Add a new index test file importing all tests/specs with globbing.
test/index.js
import '**/*.test.js';
Step 2: Add a custom rollup plugin to your project.
rollup.test-glob.js
const join = require('path').join;
const glob = require('glob').sync;
module.exports = function (mappings) {
return {
name: 'test-glob',
resolveId: function (importee, importer) {
// required to mark glob file pattern as resolved id
if (importee && importee.startsWith('**')) {
return importee;
}
return null;
},
load(id) {
if (id.startsWith('**')) {
// glob files and generate source code like
// import _0 from 'C:\dev\test\file01.test.js'; export { _0 };
// import _1 from 'C:\dev\test\file02.test.js'; export { _1 };
// ...
const files = glob(id, {
cwd: process.cwd()
});
const source = files
.map((file, i) => `import _${i} from ${JSON.stringify(join(process.cwd(), file))}; export { _${i} };`)
.join('\n');
return source;
}
return null;
}
};
};
Step 3: Use the plugin in your karma.conf.js.
karma.conf.js
const testGlob = require("./rollup.test-glob");
module.exports = function (config) {
config.set({
files: [
{ pattern: "test/index.js", watched: false },
],
preprocessors: {
"test/index.js": ["rollup"],
},
rollupPreprocessor: {
plugins: [
testGlob()
],
},
});
};
Of course you can also directly embed the "plugin" in your normal karma.conf and use it.
The solution is not perfect and a built-in solution would be nicer but it works smooth for me. 1 test bundle, quick compilation.
from karma-rollup-preprocessor.
FWIW, we updated a project to use rollup-plugin-glob-import
like @Lalem001 mentioned and it sped up our test runs from about 60 seconds to 13 seconds (from hitting enter to process complete). Our coverage report is still broken out by source file as well. Feel free to take a look at the changes that were made here: https://github.com/adobe/alloy/pull/510/files
from karma-rollup-preprocessor.
Wow.. I wish I had realized this before I converted by old webpack build to rollup. This also makes testing incredibly slow! It's honestly unusable in its current state :(
from karma-rollup-preprocessor.
@tommck The problem is in Karma, not Rollup (or karma-rollup-preprocessor). If you see Karma Webpack's Alternative Usage section, it too suggests a single entry point referencing all other files for more performance.
from karma-rollup-preprocessor.
@Lalem001 and ... rollup doesn't support importing a bunch of test files all into one in a simple way like webpack does. So... rollup doesn't have any built-in way to mitigate this. I'd say that's still a rollup + karma problem, since it's solved w/ webpack
from karma-rollup-preprocessor.
rollup doesn't support importing a bunch of test files all into one
Officially, it does. See @rollup/plugin-multi-entry
I'd say that's still a rollup + karma problem, since it's solved w/ webpack
Webpack + Karma
has the same problems as rollup + karma
. The link I posted in my previous comment talks about this. Karma forces Webpack/Rollup to generate a bundle for EACH test. The way around it, the "alternative usage", is to have a single entry file that imports all other tests.
from karma-rollup-preprocessor.
from karma-rollup-preprocessor.
@Lalem001 multiple entry points is exactly the OPPOSITE if what we need here. We need 1 entry point that pulls in all spec files so that it's ONE bundle
from karma-rollup-preprocessor.
@tommck I know, and that is what I suggested above. A single entry point that imports all others.
from karma-rollup-preprocessor.
...which we have to create manually
from karma-rollup-preprocessor.
@tommck Not necessarily. Like webpack (webpack-import-glob-loader), Rollup can be configured to import with glob (rollup-plugin-glob-import).
In which case you could have your entry file look like the following:
import '**/*.spec.js';
Please pay attention to the fact that Webpack too must be configured to work this way, which is what I have been saying all along. Webpack faces the same issues as Rollup when it comes to working within the confines of Karma. Fixing this issue requires changes to Karma itself.
from karma-rollup-preprocessor.
I'd like to drop support for Rollup@1
and Node@8
and release 8.0.0
, which will be a great opportunity to update this library's documentation to help with this situation. Any suggestions?
from karma-rollup-preprocessor.
Honestly, just a section similar to the one in Karma Webpack's readme would suffice. Single entry does come with caveats in my experience though. Karma watcher doesn't really work since it is only working with a single file. And the glob import scripts linked above do not see high amounts of usage.
from karma-rollup-preprocessor.
I am able to mostly avoid this problem by creating a single entry point for tests.
Create an entry point like:
find src -name '*.spec.js' | awk '{print "export * from '\''./" $0 "'\'';"}' > karma-entry.spec.js
Then instead of including
/src/**/*.js
include onlykarma-entry.spec.js
It would be nice if the preprocessor could handle this automatically, but incorporating this in our npm script seems to solve the problem for us.
I did this, but now my coverage report doesn't have the same breakouts as it used to. any idea how to get the separate reports again?
from karma-rollup-preprocessor.
@jasonwaters The single entry point makes sense for speeding up development, but I would use a different Karma config to generate coverage (using an environment variable to do so only in CI).
from karma-rollup-preprocessor.
We've tried using this plugin in Mochajs as well, and have decided against it becasue of the massive slowdown we experience. I have attempted to write our own karma plugin that takes all matching file globs and bundles them into a single bundle. This is done by mapping the bundle globs to a bundle path and replacing the globs in karmas file list with the bundle path and add a preprocessor for that specific file. The preprocessor then takes all the files associated with that bundle in the framework callback and bundles all of them.
This has been built only for mocha's purposes, and is so fresh off the press that it hasn't been tested properly yet. But maybe it can serve as an inspiration for solving the performance problem for this plugin.
https://github.com/mochajs/mocha/pull/4293/files#diff-fcd69381b04b5bc3dc3fa222e39fff44
from karma-rollup-preprocessor.
Single entry does come with caveats in my experience though. Karma watcher doesn't really work since it is only working with a single file.
@Lalem001 I've already implemented a custom file watcher to trigger re-bundling when module dependencies change, and it seems feasible to generate a file at runtime that imports all of the karma preprocessor entry points.
Do you have any thoughts on adding rollup-plugin-glob-import
as a preprocessor dependency and implementing something under the hood similar to what @Aaronius shared?
from karma-rollup-preprocessor.
Related Issues (20)
- Rollup has moved output options within the config
- sourcemaps not working HOT 4
- Add support of array configs HOT 4
- Source Maps not Working HOT 1
- Watching doesn't start when debugging HOT 4
- Not compatible with the latest version of Rollup (v1.0.0) HOT 2
- TypeError: Cannot read property 'forEach' of undefined HOT 4
- dynamic imports give a 404 HOT 4
- Issues using babel-typescript and @types packages HOT 3
- Watching fails to process files HOT 6
- Missing options in examples HOT 2
- Warnings when used with Rollup >= 1.27.0
- There are hints when using plug-ins that introduce files HOT 1
- @rollup/plugin-multi-entry broken by #54 HOT 6
- Watch not working on windows HOT 9
- #69 breaks configs with output.file HOT 1
- Watcher not working using TypeScript? HOT 13
- Watch mode overwrites the test file HOT 9
- New version containing fix for watch mode HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from karma-rollup-preprocessor.