Electron Desktop App Development · 课时

使用 Spectron 进行单元测试

学习使用专为 Electron 测试设计的框架 Spectron，为 Electron 应用编写有效的单元测试

使用 Spectron 进行单元测试 是 CoddyKit 上的免费 Electron Desktop App Development 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Electron Desktop App Development 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Electron Desktop App Development 课程共包含 4 节课。

本课时的部分内容尚未翻译，以英文显示。

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!

常见问题解答

「使用 Spectron 进行单元测试」课时是免费的吗？

是的 — 「使用 Spectron 进行单元测试」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Electron Desktop App Development 课程的其余内容，请升级到 CoddyKit PRO。 Electron Desktop App Development 课程共包含 4 节课。

「使用 Spectron 进行单元测试」这节课中我会学到什么？

学习使用专为 Electron 测试设计的框架 Spectron，为 Electron 应用编写有效的单元测试你通过在浏览器中直接运行的动手代码来练习 Electron Desktop App Development，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Electron Desktop App Development 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Electron Desktop App Development 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「使用 Spectron 进行单元测试」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Electron Desktop App Development 课中编写并运行代码吗？

能。每节 Electron Desktop App Development 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Electron Desktop App Development