End-to-End Testing

electron-vue makes use of Spectron and the Mocha (with Chai) test framework for end-to-end testing. Mocha & Chai APIs, including expect, should, and assert, are made available in global scope.

Running tests

# Begin Mocha
npm run e2e

Note

Before running end-to-end tests, a npm run pack is called to create a production build that Spectron can consume during tests.

File Structure

my-project
├─ test
|  ├─ e2e
│  │  ├─ specs/
│  │  ├─ index.js
└─ └─ └─ utils.js

For the most part, you can ignore index.js and focus solely on writing specs/.

specs/

Inside this directory is where actual tests are written. Thanks to the power of babel-register, you have full access to ES2015.

index.js

This file acts as the main entry to Mocha and gathers all tests written in specs/ for testing.

utils.js

Here you will find generic functions that could be of use throughout your specs/. Base functions include a beforeEach and afterEach that handle the electron creation/destruction process.

On the subject of Spectron

Spectron is the official electron testing framework that uses both ChromeDriver and WebDriverIO for manipulating DOM elements.

Using WebDriverIO

As stated in the Spectron documentation, access to WebDriverIO APIs can be accessed through this.app.client. Since electron-vue uses Mocha, the context of this is shared between afterEach, beforeEach, and it. Because of this, it is important to note that ES2015 arrow functions cannot not be used in certain situations as the context of this will be overwritten (more info).