How can I apply babel config ahead of an electron app's main.js, when using Spectron?

Question

I'm using jest to run a test script that starts an Electron application using Spectron. What is the correct way to load my babel configuration? Normally I start the app like this: npx electron -r @babel/register . (npm start in package.json)

My test script using Spectron tries to initialize it like this:

import { Application } from 'spectron';
const app = new Application({
  path: 'node_modules/electron/dist/electron',
  args: ["-r @babel/register", "src/main.js"],
  chromeDriverArgs: ['--disable-dev-shm-usage', '--headless'],
  chromeDriverLogPath: 'chromeDriver.log'
})

But main.js crashes with a SyntaxError on the first import statement. Clearly -r @babel/register is not loading.

If I construct a command from that same path and args manually at the terminal:

node_modules/electron/dist/electron -r @babel/register src/main.js

the application launches just fine. But looking at the chromeDriver log, I see that this command is probably not identical to what is actually called. From the log:

"chromeOptions": {
         "args": [ "spectron-path=node_modules/electron/dist/electron", "spectron-arg0=-r @babel/register", "spectron-arg1=src/main.js", "--disable-dev-shm-usage", "--headless" ]

My hacky workaround right now is to make a specmain.js script with the following:

"use strict";
require("@babel/register");
require("./main")

And then my test script successfully launches the app, now using:

const app = new Application({
  path: 'node_modules/electron/dist/electron',
  args: ["src/specmain.js"],
  chromeDriverArgs: ['--disable-dev-shm-usage', '--headless'],
  chromeDriverLogPath: 'chromeDriver.log'
})

What is a good approach for requiring @babel/register ahead of main.js in the context of Spectron?

How can I apply babel config ahead of an electron app's main.js, when using Spectron?

0 Answers0