Electron Desktop App Development · Lesson

Unit Testing with Spectron

Learn to write effective unit tests for your Electron applications using Spectron, a framework specifically designed for Electron testing.

Unit Testing with Spectron is a free Electron Desktop App Development lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Electron Desktop App Development learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Why Unit Test Electron Apps?

Building desktop applications with Electron brings the power of web technologies to your users' desktops. Just like any software, these apps need to be reliable and bug-free.

Unit testing helps ensure individual components of your application work as expected. For Electron, this means testing both the main (Node.js) and renderer (Chromium) processes, as well as their interactions.

Meet Spectron: Electron's Test Tool

Spectron is a testing framework specifically designed for Electron applications. It's built on top of WebDriver (like ChromeDriver), allowing you to programmatically control an Electron app just like a user would.

It launches your Electron app in a separate process.
It provides APIs to interact with both the main and renderer processes.
You can simulate user actions like clicks, typing, and navigation.

Spectron doesn't replace your test runner (like Mocha or Jest); it works with them!

Setting Up Your Test Environment

Before writing tests with Spectron, you'll need a few things:

Node.js & npm: Already installed for Electron development.
An Electron application: The app you want to test.
A test runner: We'll use Mocha for its simplicity and wide adoption.
An assertion library: Chai is a popular choice for making assertions.

These tools will help you structure your tests and verify outcomes.

Installing Spectron, Mocha, & Chai

Let's install the necessary packages as development dependencies using npm:

spectron: The Electron testing framework.
mocha: Our test runner.
chai: Our assertion library.

Run the following command in your project's root directory:

npm install --save-dev spectron mocha chai

Basic Spectron Test Structure

A typical Spectron test file uses Mocha's describe and it blocks. The key is to instantiate Spectron's Application class and manage its lifecycle with beforeEach and afterEach hooks.

This ensures your app starts before each test and stops afterwards.

const { Application } = require('spectron');
const path = require('path');
const assert = require('assert'); // Using Node's built-in assert for simplicity

describe('Application launch', function () {
  this.timeout(10000); // Give Electron app time to start
  let app;

  beforeEach(async function () {
    app = new Application({
      path: path.join(__dirname, '..', 'node_modules', '.bin', 'electron'),
      args: [path.join(__dirname, '..', 'main.js')], // Path to your app's main file
    });
    await app.start();
  });

  afterEach(async function () {
    if (app && app.isRunning()) {
      await app.stop();
    }
  });

  it('shows an initial window', async function () {
    const count = await app.client.getWindowHandles().then(handles => handles.length);
    assert.strictEqual(count, 1);
  });
});

Interacting with the Renderer Process

Spectron's app.client object gives you access to the Chromium WebDriver API. This allows you to interact with the web content in your renderer process.

Use CSS selectors to find elements.
Get text content, attribute values, or check element visibility.
Execute JavaScript directly within the renderer process.

It's like having browser developer tools in your test!

// Get text from an element with ID 'my-heading'
const headingText = await app.client.element('#my-heading').then(el => el.getText());
assert.strictEqual(headingText, 'Welcome!');

// Execute JavaScript to get the document title
const title = await app.client.webContents.executeJavaScript('document.title');
assert.strictEqual(title, 'My Electron App');

Example: Verify Window Title

Let's write a complete test to ensure our Electron application's main window has the correct title after it launches. This verifies a basic aspect of your app's initialization.

const { Application } = require('spectron');
const path = require('path');
const assert = require('assert');

describe('Window Title Verification', function () {
  this.timeout(10000);
  let app;

  beforeEach(async function () {
    app = new Application({
      path: path.join(__dirname, '..', 'node_modules', '.bin', 'electron'),
      args: [path.join(__dirname, '..', 'main.js')],
    });
    await app.start();
  });

  afterEach(async function () {
    if (app && app.isRunning()) {
      await app.stop();
    }
  });

  it('should have the title "My Electron App"', async function () {
    const title = await app.client.webContents.getTitle();
    assert.strictEqual(title, 'My Electron App');
  });
});

Simulating User Actions

Spectron allows you to mimic user interactions. This is crucial for testing interactive elements and user flows within your application.

click(selector): Simulates a click on an element.
setValue(selector, value): Types text into an input field.

You can then assert the resulting state of your UI or data.

// Assuming an HTML button with ID 'increment-btn'
// and a display element with ID 'counter-display'

await app.client.click('#increment-btn');

const counterValue = await app.client.getText('#counter-display');
assert.strictEqual(counterValue, '1');

// Assuming an input field with ID 'username-input'
await app.client.setValue('#username-input', 'testuser');

const username = await app.client.getValue('#username-input');
assert.strictEqual(username, 'testuser');

Accessing the Main Process

Spectron also provides ways to interact with the main process, which is where your Node.js code runs. This is powerful for testing backend logic or Electron's native APIs.

app.client.electron: Accesses Electron's built-in modules (e.g., app, dialog).
app.client.mainProcess: Allows calling functions directly on the main process's global object.

Remember, for security, direct access is often limited by context isolation and preload scripts.

// Get the Electron app version from the main process
const version = await app.client.electron.app.getVersion();
console.log(`Electron App Version: ${version}`);

// Example: Call a custom function exposed by the main process
// (Requires 'main.js' to expose 'myCustomFunction' globally or via contextBridge)
// const mainProcessResult = await app.client.mainProcess.myCustomFunction('data');
// assert.strictEqual(mainProcessResult, 'processed-data');

Spectron Quick Check

Let's test your understanding of Spectron's capabilities!

Recap: Unit Testing with Spectron

In this lesson, you learned how Spectron helps you unit test your Electron applications effectively.

Spectron uses WebDriver to launch and control your Electron app.
It allows you to interact with both the renderer process (UI elements, JS execution) and the main process (Electron APIs, Node.js functions).
Combined with test runners like Mocha and assertion libraries like Chai, Spectron provides a robust way to ensure your Electron app behaves as expected.

Keep practicing to build reliable desktop experiences!

Frequently asked questions

Is the “Unit Testing with Spectron” lesson free?

Yes — the full text of “Unit Testing with Spectron” is free to read here on the web, and the Electron Desktop App Development course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Electron Desktop App Development course, upgrade to CoddyKit PRO.

What will I learn in “Unit Testing with Spectron”?

Learn to write effective unit tests for your Electron applications using Spectron, a framework specifically designed for Electron testing. You practise Electron Desktop App Development with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Electron Desktop App Development?

No prior experience is required. Electron Desktop App Development on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Unit Testing with Spectron” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Electron Desktop App Development lesson?

Yes. Every Electron Desktop App Development lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Electron Desktop App Development