Electron Desktop App Development · Lekcja

Testy jednostkowe z Spectron

Naucz się pisać skuteczne testy jednostkowe aplikacji Electron za pomocą Spectron, frameworka zaprojektowanego specjalnie do testowania Electron.

Testy jednostkowe z Spectron to bezpłatna lekcja Electron Desktop App Development na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Electron Desktop App Development, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Electron Desktop App Development zawiera 4 lekcji w sumie.

Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.

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!

Często zadawane pytania

Czy lekcja „Testy jednostkowe z Spectron” jest bezpłatna?

Tak — pełny tekst „Testy jednostkowe z Spectron” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Electron Desktop App Development, przejdź na CoddyKit PRO. Kurs Electron Desktop App Development zawiera 4 lekcji w sumie.

Co nauczysz się w „Testy jednostkowe z Spectron”?

Naucz się pisać skuteczne testy jednostkowe aplikacji Electron za pomocą Spectron, frameworka zaprojektowanego specjalnie do testowania Electron. Ćwiczysz Electron Desktop App Development z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Electron Desktop App Development?

Nie wymagamy żadnego doświadczenia. Electron Desktop App Development w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Testy jednostkowe z Spectron”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Electron Desktop App Development?

Tak. Każda lekcja Electron Desktop App Development zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Debugowanie procesów głównego i renderera
Testy jednostkowe z Spectron
Przepływy testów end-to-end
Nowoczesne testy E2E z Playwright

← Powrót do Electron Desktop App Development