Minimalistic Live Testing Fable Apps With QUnit
Basically, combine QUnit with webpack developement server to get going. QUnit has a web user-interface that shows the test results and webpack will automatically recompile and refresh the web page whenever you make changes to your tests. This way you can get feedback from your tests quickly. Just edit and save, et voilà.
Besides the web user-interface, QUnit has a cli tool to run the tests without a browser, see section: Using the QUnit CLI.
New to Fable? See the wiki to get started
Setting up QUnit
This is incredibly easy. First of all, install the simple (browser app) Fable template:
dotnet new fable
Then add this QUnit.fs gist to your project and reference the file from your
This QUnit.fs binding assumes there is a global
<Compile Include="path/to/QUnit.fs" />
<Compile Include="src/App.fs" />
You can now use QUnit from your
App.fs file. But this
QUnit.fs file is just a binding for the actual library. You have to reference the QUnit library in your
index.html file using a script tag (along with two div’s and a css file for the UI) as follows:
Now just fire up webpack developement server and start writing your tests, live!
dotnet fable npm-run start
Testing asynchronous code
When using async, you will run tests that might finish at some time in the future. When using QUnit, you have to tell the library when you are “finished”, here is an example:
See the official docs of QUnit to learn more
test.async() returns a callback of type
unit -> unit that you would call to let QUnit know that your async test is done.
You can also see that the test took about 1017 milliseconds to finish which is what you would expect because there is a 1000 ms of
Async.Sleep . If you don’t call
finish() QUnit will contiue to run the test to check the results but the test will be considered “still running”.
If your async test has many async blocks, you have to tell QUnit how many finishing blocks it has to expect for that test, using:
let finish = test.asyncMany n
n is the number of times you will call
Forgetting about calling
finish() the right number of times is likely to happen at some point. That’s why you can set a global timeout for your tests like this:
You can provide your tests a descriptive message using
test.equalWithMsg result 16 "square 4 = 16"
Using the QUnit CLI
Install it from npm:
npm install --save-dev qunitjs
On a new shell tab, build and bundle your test project once, i.e. without
webpack-dev-server but rather just
dotnet fable npm-run build
test script to your package.json, with your bundled project (the
bundle.js file) as an argument for the QUnit cli tool:
"build": "webpack -p",
"test": "qunit/qunit.js public/bundle.js"
npm run test :
Simple, easy and most importantly: live. QUnit is becomming a bit old now and there many other modern test frameworks out there, but still it seems to be quite usable for your everyday testing needs. This was just me exploring what’s out there and sharing it with you. If you liked this atricle, hit that 💚 button and share!