i've got a karma-webpack2-qunit setup with babel loader working. es6 is used for both src and test js files.
when running karma in autowatch mode, any changes to source files are detected and karma re-runs the test suite again but the changes are not picked up.
based on this note from the webpack-karma integration page: webpack-karma middleware info , this seems like the config option i need to get the setup fully working.
"This loader provides a webpackBlocker middleware that will block tests from running until code recompiles."
i can't find any examples of using the webpackBlocker configuration.
does someone have a working config they can share?
here's what i'm using in karma.config.js:
the karma test suite is working still but code changes to source or test code do not get reflected in the next run.
i finally got this working. had a mismatch in my "files" pattern config for my test and source files including the "context" object.
now when i modify either test or source js files, the code is compiled first and the tests are rerun in autowatch mode. yay !!!
will post the full working solution to a GitHub repo in case anybody else wants to get the same "unholy" :-) combination (karma + qunit + webpack + es6 + mocha reporter + phantomjs) working. will also add linting.
Related
I am currently building a Visual Studio Code extension in typescript and I want to write some tests for it. My tests work fine using the npm test --silent command, there are just annoying errors saying Rejected cached data from file: and then a file name in my AppData\Roaming\Code\CachedData folder. I tried to look up the error but the issue doesn't seem to be well documented.
FYI: VSCode extensions use mocha as their default testing framework.
For whatever reason deleting the CachedData folder fixed the issue. Not ideal but it works.
I have flow integrated into a webpack / babel build using flow-babel-webpack-plugin and it works great. Webpack dev server compiles / serves assets in less than a second and if there are flow type errors it prints them out nicely. I'm very happy with that.
The problem begins when I turn on my IDE. In both VSCode and Atom, if I enable any kind of flow support, my webpack / babel build immediately begins to choke. It will take anywhere between 4 and 70 seconds to compile any change. Often it fails and gives multiple flow is still initializing notices and indicates it has tried to start the server over and over.
I suspect that both webpack and the IDE are trying to spin up separate flow servers at the same time and this is causing a conflict. Or they are using the same flow server and this is, for some reason, also a problem. I just can't figure out what to do about it. I have tried pointing at separate binaries with webpack using the global flow and the IDE using the one from node_modules. No dice.
It seems like this must be an extremely common use case - flow + a webpack watcher + any IDE whatsoever.
I'd like to have both my webpack build compile flow code and have my IDE show me syntax errors etc. So far that's been impossible
It looks like that plugin uses its own copy of Flow, from the flow-bin package:
index.js
package.json
If this version is out of sync with what your IDE is starting up, then they will fight -- starting up one version of Flow will kill any Flow server with a different version that is already running in that directory.
If you put flow-bin in your devDependencies (alongside this webpack plugin) and lock it to a specific version, and also set your IDE to use the Flow binary from flow-bin, then it looks like npm will just install the version you specify, and both the plugin and the IDE will be able to use the same Flow version.
Without knowing more specifics about your setup, it's hard to recommend a more concrete solution. You'll have to either make it so both your IDE and this webpack plugin are running the same version of Flow, or stop using either the IDE or the webpack plugin.
I would like to create a test suite which will be run with karma against my app which is using webpack to build itself. I have two entrypoints, app and vendors. These are set up through my webpack.config.js file here. The resulting bundle.js should contain both of these entrypoints in its generated file.
My karma (mocha) tests residing in test/spec/*_spec.js are currently pointing to specific components, via require statements like:
var app = require('../src/scripts/App')
They also utilize react/jsx which seems to be causing problems during the test run where I get jsx errors:
Module parse failed: /Users/dmarr/src/status/test/spec/app_spec.js Line 10: Unexpected token <
You may need an appropriate loader to handle this file type.
I'd like to keep test runs quick as possible as well as fast build times for testing with webpack-dev-server during development by minimizing babel transforms to only where needed.
What do I need to do in karma.conf.js to get my builds working? Here is the karma.conf.js file I'm playing around with.
Note, that I do have this working without breaking out the vendor bundle here: https://github.com/bitwise/status
Thanks for any help,
Dave
In a similar setup, disabling CommonsChunkPlugin (for testing only) worked for me. Give it a shot!
I've used Yeoman to make a quick project skeleton using the yo webapp generator command. In the resulting Gruntfile I see that it's setup to compile CoffeeScript but it seems like its just sticking compiled files in a tmp folder.
coffee: {
dist: {
files: {
'.tmp/scripts/coffee.js': '<%= yeoman.app %>/scripts/*.coffee'
}
},
},
How do these get included in the project during development. I'm not using RequireJS.
The yeoman docs are unclear on how to use coffeescript. They only mention that it gets automatically compiled.
Using yeomen 1.0.0-rc1.4. I use:
$ yo angular --coffee
The resulting project has controller and app scripts in CoffeeScript.
grunt configuration file remains in js (what is not really a problem).
Running
$ grunt test
runs tests and all seems fine.
$ grunt server
is also doing what one expects (build the app, test it, starts server, opens the app in web browser and starts watching for changes, so if I change a coffee script file, it is quickly reflected in the web broser.
Documentation also states, one can use yo to add particular pieces like
angular:controller
angular:directive
angular:filter
angular:route
angular:service
angular:decorator
angular:view
each can be called with a --coffee switch and get the script in CoffeeScript, e.g.:
yo angular:controller user --coffee
I just found an issue in the github repo referencing this problem. https://github.com/yeoman/generator-webapp/issues/12
It offers a temporary solution: https://github.com/yeoman/generator-webapp/issues/12#issuecomment-13731929
I was evaluating MGWT for the new mobile version of our website. So I downloaded the MGWT's showcase project and set it up in my Eclipse. I was able to compile the project and run it. I was then trying to set up the showcase to run in the Super Dev Mode environment which would help improve the development speed a lot. I followed the steps in Daniel's blog: http://blog.daniel-kurka.de/2012/07/mgwt-super-dev-mode.html.
Everything was fine. I was able to start the Codeserver. I was able to see the Super Dev Mode popup when I opened up the app. I was able to request the Codeserver to recompile and I could see the compilation messages in the console. I could also see the generated JS files of the recompilation.
However, it seemed that the Codeserver did not pick up the changes I made. I tried to change a simple text, then asked the Codeserver to recompile, but the changes did not show after the recompilation. When I checked the new generated JS files, I could see that the Codeserver still used the old code to recompile.
When I restarted the Codeserver, the changes were recompiled correctly and I could see them in the app.
If anyone has a clue of what I might have done wrong, please let me know. I appreciate your help very much.
Thanks
Just happened to find a solution to my own question:
Instead of adding the source folder to the classpath of the Codeserver run config as in Daniel's instructions, I added this source folder as part of the command line arguments using the -src argument (see here for more info).
So the arguments string for the Codeserver launch config should look like:
-bindAddress <codeserver-ip-address> -src <gwt-source-path> <gwt-module-name>