Tuesday, August 30, 2016

Setting up Spectron with Mocha for testing Electron apps before packaging



So you've decided to unit-test your electron app? great! you've made the right decision.
The thing is, it can be a little confusing figuring out where to start, as Electron development has a different work flow than traditional web apps.

Spectron is a young -official- project for testing Electron apps, it is great once you get to know it but it's so young that its documentation is a little not clear when it comes to using it while developing (i.e. not having an executable for your app).
This post will help you setup your testing environment. It assumes that you're going to use Mocha, but it should be no different for any other testing framework.
note: this post assumes that you use electron (formerly electron-prebuilt) for developing your app.

Lets get started

First things first, install Spectron as a dev dependency
$ npm install --save-dev spectron

And install Mocha, also as a dev dependency
$ npm install --save-dev mocha

If you've ever been to Spectron documentation, they provide an example for using Mocha, let's use it with a little twist.
var Application = require('spectron').Application
var assert = require('assert')

describe('application launch', function () {
  this.timeout(10000)

  beforeEach(function () {
    this.app = new Application({
      path: `${__dirname}/../node_modules/.bin/electron`,
      args: ['main.js']
    })
    return this.app.start()
  })

  afterEach(function () {
    if (this.app && this.app.isRunning()) {
      return this.app.stop()
    }
  })

  it('shows an initial window', function () {
    return this.app.client.getWindowCount().then(function (count) {
      assert.equal(count, 1)
    })
  })
})

Update: as Mats Lindblad pointed out in his comment, if you're using Windows, you might need to add ".cmd" to the end of the path property at line 9, so it becomes
path: `${__dirname}/../node_modules/.bin/electron.cmd`,
.
It's your usual Mocha tests, just added the part of Spectron that creates and launches the app before each test.
So in order to run your tests during development (executing your app's main script), look at lines 9 and 10, the api documentation mentions tht the path option is required, so to start with the main script, point the path to the electron executable (if it's installed globally, just type electron) and provide the first argument in the args array as your main script.

Now in your package.json file point Mocha to your tests folder (or if you don't specify a folder, it will default to "test" as the folder holding your test files)

...
"scripts": {
    "test": "mocha mytests"
...
Put the code of the example above in your mytests folder and run npm test

That's it, now dive into the api documentation and write your usual Mocha tests.

5 comments:

  1. To run on windows you might need to add ".cmd" to the path to Electron.
    Other than that it was a good simple example. :)

    ReplyDelete
    Replies
    1. I just got my hands on a Windows machine and you're absolutely right.
      Updated, thanks!

      Delete
  2. where do I save the above .js file and what name do I give it?

    ReplyDelete
    Replies
    1. You can give it any name as long as you let Mocha find it.
      The simplest way is to create a directory named "test" in the root of your electron project and save that .js file inside of it. Mocha executes all files inside that directory by default.

      Delete
  3. Error: ChromeDriver did not start within 5000ms
    Is all I get.

    ReplyDelete