Easiest way to run jest unit test cases in electron.

When we run unit test in Jest, it is actually running in the node environment, or virtual browser environment(e.g. JSDOM) mocked by NodeJS. Sometimes we need a lot of Jest mocks for running code with no throw, such as: jest-canvas-mock, jest-storage-mock, @jest/fake-timers and so on. This is solved by Jest-Electron.

1. Technological ecology of Jest.
2. Complete and real browser environment.
3. Multi-renderer for running performance.
4. Running and debug is better then mock.

• Add into devDependencies

$ npm i --save-dev jest-electron

• Update Jest config

{
  "jest": {
+    "runner": "jest-electron/runner",
+    "testEnvironment": "jest-electron/environment"
  }
}

Notice: update the runner configure, not testRunner.

Those will be helpful when run test case with jest-electron.

• jest-less-loader: Run test cases with import less, css code.
• jest-url-loader: Run test cases with import svg, png, jpg or other url file..

Run test cases with jest-electron for continuous integration.

• GitHub action

Running on macOS will be ok.

- runs-on: ubuntu-latest
+ runs-on: macOS-latest

• travis

Update .travis.yml with electron supported.

language: node_js
node_js:
  - "8"
  - "9"
  - "10"
  - "11"
  - "12"
+ addons:
+   apt:
+     packages:
+       - xvfb
+ install:
+   - export DISPLAY=':99.0'
+   - Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &
+   - npm install
script:
  - npm run test

Depending on your executor, you might need to disable sandbox and shared memory usage:

export JEST_ELECTRON_STARTUP_ARGS='--disable-dev-shm-usage --no-sandbox'
npm run test

• debug mode

Keep the electron browser window for debugging, set process env DEBUG_MODE=1.

DEBUG_MODE=1 jest

• additional startup arguments

Run electron with arbitrary arguments.

JEST_ELECTRON_STARTUP_ARGS='--disable-dev-shm-usage'

Run electron with --no-sandbox, set process env JEST_ELECTRON_STARTUP_ARGS='--no-sandbox'.

JEST_ELECTRON_STARTUP_ARGS='--no-sandbox' jest

MIT@hustcc.