DEV Community

Cover image for Electron Testing Best Practices: Testing Main and Renderer Code with Jest
Sibelius Seraphini for Woovi

Posted on

7

Electron Testing Best Practices: Testing Main and Renderer Code with Jest

Electron is a great tool to create desktop applications.

Electron Basics

Electron consists of three parts: main process, renderer processes, and preload.

You only have one main process that is responsible for launching windows, controlling tray icons, and handling APIs that are only available for node, and not for web or Chrome.
The main process is a node process.

The preload lets us expose some node API to the renderer process.

The renderer process is attached to a Window, and it runs like JavaScript in the browser.

Testing both Main and Renderer code

The main code is a node code, and the renderer code is a browser code.
So we need a way to tell Jest to use different testing environments for each test.

There are two possible approaches to solving this

Using docblock

/**
 * @jest-environment jsdom
 */
Enter fullscreen mode Exit fullscreen mode

You can set the default test infra to use node, and in each renderer test file, you add this docblock to change the test environment.

The problem with this approach is that some developers can forget, and get some weird bugs hard to solve.

Using Jest Multi-Project-Runner

We can use Jest Multi-Project-Runner in a single repository, and modify each project to have their own configuration.

Let's see how to have 2 projects, one for main and another for renderer:

jest.config.js

module.exports = {
  projects: [
    '<rootDir>/jest.main.config.js',
    '<rootDir>/jest.renderer.config.js',
  ],
}
Enter fullscreen mode Exit fullscreen mode

jest.main.config.js

module.exports = {
  testRegex: '((\\.|/)(main.spec))\\.(js|ts|tsx)?$',
  testEnvironment: 'node',
}
Enter fullscreen mode Exit fullscreen mode

jest.renderer.config.js

module.exports = {
  testRegex: '((\\.|/)(renderer.spec))\\.(js|ts|tsx)?$',
  testEnvironment: 'jsdom',
}
Enter fullscreen mode Exit fullscreen mode

Using testRegex to match different testfiles we can turn the test environment explicit:

any *.main.spec.ts will use node environment
any *.renderer.spec.ts will use jsdom environment

Wrapping Up

You can use existing tools to adapt to your new use cases.
Jest multi-project runner is versatile and can also be used in a single repo to test different codes and requirements.

You can use the same approach to test nextjs backend, and frontend code, and also SSR and Server Components.


Woovi
Woovi is a Startup that enables shoppers to pay as they like. To make this possible, Woovi provides instant payment solutions for merchants to accept orders.

If you want to work with us, we are hiring!


Photo by Jr Korpa on Unsplash

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

đź‘‹ Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay