Spectronによる単体テスト
Electronのテスト専用フレームワークであるSpectronを使い、Electronアプリケーション向けの効果的な単体テストを作成する方法を学びます。
「Spectronによる単体テスト」はCoddyKit上の無料Electron Desktop App Developmentレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応の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 chaiBasic 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による単体テスト」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Electron Desktop App Developmentコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Electron Desktop App Developmentコースには全4レッスンが含まれています。
「Spectronによる単体テスト」で何を学びますか？
Electronのテスト専用フレームワークであるSpectronを使い、Electronアプリケーション向けの効果的な単体テストを作成する方法を学びます。 ブラウザで直接実行するハンズオンコードでElectron Desktop App Developmentを演習し、24時間対応の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フィードバックを取得できます。ローカル設定は不要です。