Comments (39)
check out https://www.npmjs.com/package/karma-webpack-with-fast-source-maps https://github.com/aaronjensen/karma-webpack
our builds run in a few hundred ms, and it only runs the tests it needs to
from karma-webpack.
It shouldn't be that hard to implement. Just need to somehow hook into Webpack's incremental building (what happens when you run --watch). I'll give it a try when I find some time.
from karma-webpack.
You, my friend @aaronjensen, is the best thing since the invention of electricity!
I'm really looking forward to the day four fork is merged into webpack-karma mainline.
Great work!
from karma-webpack.
I'm seeing the same issue. I have sourcemaps enabled so I know there is a performance hit there. I'm seeing 10-15s build times for about 40 files and of course their required node modules. I'd love to take advantage of a vendor bundle like I do in production but doesn't seem supported.
from karma-webpack.
I'm currently at 5s. It's really frustrating. How is everybody esle dealing with this?
from karma-webpack.
I gave up and moved to node with jsdom. so much nicer
from karma-webpack.
+1
The rebuild time is unacceptable for a typical TDD workflow
We are experiencing this even in a medium sized project
from karma-webpack.
Would definitely love to see this!
from karma-webpack.
Sorry intended to comment with my workaround. I am running weback with --watch as a separate process and not using karma to build :(
from karma-webpack.
@aaronjensen that is incredible, thank you so much!
from karma-webpack.
You bet.
from karma-webpack.
Nice!
Any chance this becomes a PR soon? :)
from karma-webpack.
@leoselig maybe, @sokra is on vacation, we can discuss when he gets back. I'd love to have it in, but it removes some features (that don't appear to work any way-- #77)
from karma-webpack.
also, part of it is a pull already: #76
from karma-webpack.
That's really nice @aaronjensen! Thanks. I ended up using your fork and creating a helper function to encapsulate the entry file boilerplate it depends on. Our entry file looks a bit like this:
const hotLoader = require('./tools/hotTestLoader')
hotLoader(require.context(/* etc /*))
from karma-webpack.
@aaronjensen FYI, your package stopped working from karma@>=0.13.11. (Your repo doesn't have issues enabled).
from karma-webpack.
@necolas It works for me w/ 0.13.15. What problem are you seeing?
from karma-webpack.
When a file changes, it reruns 0 tests with every version of karma >= 0.13.1. I've moved the boilerplate into a function that is called with the webpack require.context
.
// hotloader.js
module.exports = function hotLoader(context) {
const __karmaWebpackManifest__ = [];
function inManifest(path) {
return __karmaWebpackManifest__.indexOf(path) >= 0;
}
let runnable = context.keys().filter(inManifest);
// Run all tests if we didn't find any changes
if (!runnable.length) { runnable = context.keys(); }
runnable.forEach(context);
};
// entry
hotLoader(require.context(...))
from karma-webpack.
@necolas sorry, can't reproduce. Try the most simple case in your entry:
const __karmaWebpackManifest__ = [];
require('./specHelper');
const testsContext = require.context('.', true, /\/(?!(flycheck))[^/]+\.spec$/);
function inManifest(path) {
return __karmaWebpackManifest__.indexOf(path) >= 0;
}
let runnable = testsContext.keys().filter(inManifest);
if (!runnable.length) {
runnable = testsContext.keys();
}
runnable.forEach(testsContext);
from karma-webpack.
Actually, yes, I believe that's what the problem is. I actually replace __karmaWebpackManifest__
with the actual manifest in webpack, so moving it out of your entry probably won't work.
from karma-webpack.
Hmm, it had been working and works with some versions of Karma.
from karma-webpack.
Tried inlining everything in my entry file and I have the same problem. I'm using webpack 1.12.2
from karma-webpack.
@aaronjensen would it be possible to add a way to signal to karma (via a kill signal or some http url) so that I can get karma to run all the tests without restarting karma?
from karma-webpack.
@tarjei touching or saving your test entry point will run all the tests.
from karma-webpack.
@aaronjensen https://www.npmjs.com/package/karma-webpack-with-fast-source-maps is a great plugin which really speed up tests. I think it should be part of karma-webpack
.
What do you think?
from karma-webpack.
@maksimr i'm all for it, I just haven't had a lot of time to make it so. I'm also still not entirely clear on some of the changes I made, like with the multiple configurations.
from karma-webpack.
@aaronjensen I see. My opinion If you push current solution to the karma-webpack we can understand what people use and community will faster fix karma-webpack then your fork. Maybe they simple does not use multiple configuration. :)
Thanks
from karma-webpack.
//cc @MikaAK
from karma-webpack.
It's not directly related to karma-webpack
but this https://github.com/lucassus/angular-webpack-seed/pull/51/files PR demonstrates how I workaround slow rebuild problem.
Basically in the first terminal I run webpack watcher, in the configuration I have two chunks - vendor, app + specs and in the second terminal I'm running karma watcher against the generated files.
Rebuild speed in this case is almost x5 better, perfect for TDD ;)
from karma-webpack.
Very interesting!
2016-11-17 13:35 GMT+01:00 Lukasz Bandzarewicz [email protected]:
It's not directly related to karma-webpack but this
https://github.com/lucassus/angular-webpack-seed/pull/51/files PR
demonstrates how I workaround slow rebuild problem.
Basically in the first terminal I run webpack watcher, in the
configuration I have two chunks - vendor, app + specs and in the second
terminal I'm running karma watcher against the generated files.Rebuild speed in this case is almost x5 better, perfect for TDD ;)
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#54 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAM5PxNcQb3WdBDpOQzqfMfjCwXJpMrnks5q_EodgaJpZM4FEZuQ
.
Tarjei Huse
Mobil: 920 63 413
from karma-webpack.
@aaronjensen Is there any hope of your changes in karma-webpack-with-fast-source-maps
getting merged into karma-webpack
? It seems like it's been a while and I want to know if there's anything I can do to help.
from karma-webpack.
@pjtatlow We don't use Karma anymore and I believe karma-webpack has changed a bit since my fork. I'm sure they would welcome a PR w/ my changes to the current karma-webpack.
from karma-webpack.
@aaronjensen 's solution worked for me!
from 18-20 seconds the rebuild scaled down to about 1s!!
The solution for me was in this link: https://github.com/aaronjensen/karma-webpack
Thanks @aaronjensen !
from karma-webpack.
I'm currently running webpack-dev-server on the side to build my test bundle then telling Karma to watch the output bundle for changes.
from karma-webpack.
Any news regarding this problem? It is almost impossible for me to have karma watch for changes as recompiling takes ages. It's always faster to just break and restart the tests.
from karma-webpack.
@dannybloe we are currently using this workaround
karma.config.js
webpackConf.plugins = webpackConf.plugins.concat(
(new class {
apply(compiler) {
const name = 'YouTrackKarmaAffectedTestsPlugin';
const {ConcatSource} = require('webpack-sources');
compiler.hooks.compilation.tap(name, compilation => {
compilation.hooks.optimizeChunkAssets.tap(name, chunks => {
const affected = compilation.modules.reduce((affected, module) => {
if (module.built && !affected.has(module.id)) {
affected.add(module.id);
const queue = module.reasons.map((reason) => reason.module);
while (queue.length) {
const module = queue.shift();
if (module && !affected.has(module.id)) {
affected.add(module.id);
// eslint-disable-next-line max-depth
for (const reason of module.reasons) {
queue.push(reason.module);
}
}
}
}
return affected;
// eslint-disable-next-line no-undef
}, new Set());
const karmaWebpackManifest = JSON.stringify(Array.from(affected));
for (const chunk of chunks) {
for (const file of chunk.files) {
compilation.assets[file] = new ConcatSource(
`this.karmaWebpackManifest = ${karmaWebpackManifest};`,
'\n',
compilation.assets[file]);
}
}
});
});
}
}())
);
test-bundle.js
const testsContext = require.context('../../app', true, /test\/(?!e2e\/).*\.js$/);
const allTests = testsContext.keys();
const affectedTests = global.karmaWebpackManifest ?
allTests.filter((path) => global.karmaWebpackManifest.indexOf(testsContext.resolve(path)) >= 0) :
null;
(affectedTests && affectedTests.length ?
affectedTests :
allTests).forEach(testsContext);
So this code allows us to run only tests affected by changes.
global.karmaWebpackManifest
- This global variable contains a list of files affected by changes. We inject this variable by webpack plugin (described above)
from karma-webpack.
Mm, looks complicated 😉
Does this solve the issue where, upon a code change, Webpack quickly runs to 89% of the compilation process and then seems to wait for a couple of minutes before it continues (and run the tests)?
from karma-webpack.
I'll test this on a large project and see if there is still a significant slowdown.
from karma-webpack.
As karma is now deprecated and coming up on EOL, we are no longer planning on any significant enhancements to this project and are instead going to focus on security updates, stability, and a migration path forward as karma's lifecycle comes to an end.
Thank you for supporting and using this project!
from karma-webpack.
Related Issues (20)
- karma-webpack 5.0 No longer notified of compilation starting HOT 2
- Cannot read property 'entry' of undefined
- Cannot read property 'entry' of undefined
- karma-webpack 5 fails to read files with a query parameter (e.g. font-awesome) HOT 6
- 5.0 crashes on MacOS (Preprocessor, Plugin), fixed on master -> Release 5.1? HOT 7
- Trying to add karma-webpack to angular karma config HOT 2
- karma.conf.js being treated as entrypoint results in many errors from webpack 5 HOT 2
- Webpack Errors being reported twice.
- Process is not defined HOT 1
- Error during file loading or preprocessing HOT 7
- Webpack file cache isn't generated when webacpack watch option is false/nothing
- karma-webpack does not respect webpack mode = "production" HOT 3
- I have the same problem. HOT 1
- preprocessor change between v4 & v5 leading to error when used with karma-mocha HOT 15
- Issue with Webpack 5 unable to find file 404 (works with webpack 4) HOT 1
- Don't warn overriding [name].js to [name].js
- Figure out a publishing Github Workflow
- Ensure all project dependencies have no auditing issues
- Provide a migration path from karma-webpack
- Update the README.md
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-webpack.