cypress-hmr-restarter

A rudimentary Cypress plugin(?) for automatically restarting tests after Webpack Hot Module Replacement (HMR) updates.

Setup

1. Install

npm install --save-dev cypress-hmr-restarter

2. Import

// E.g. in cypress/support/index.js

// For webpack HMR (used in e.g. create-react-app or angular 11+)
import 'cypress-hmr-restarter';

// For webpack-hot-middleware (used in e.g. gatsby)
import 'cypress-hmr-restarter/gatsby';

3. Make sure either baseUrl or hmrUrl is configured

// E.g. in cypress.json
{
  // Works with e.g. default create-react-app configuration
  "baseUrl": "http://localhost:3000"
}

Options

{
  // Overriding then URL used to connect, otherwise created from the baseUrl
  "hmrUrl": "ws://localhost:3000/sockjs-node", // Default import
  "hmrUrl": "ws://localhost:3000/websocket", // Angular 11+ import
  "hmrUrl": "http://localhost:3000/__webpack_hmr", // Gatsby import

  // Overrides delay between event and restart (ms)
  "hmrRestartDelay": 1500
}

What it does

When using the Cypress Test Runner (cypress open), after the window has loaded, it will try to connect and listen for events. When an event signifying a change has happened, it will first try clicking the stop button, and then, after a short delay, it will click the restart button.

• The default import connects to the webpack-dev-server websocket at either <hmrUrl> or ws://<baseUrl>/sockjs-node (wss: if https:), and listens for messages with the type invalid.

  IMPORTANT: You need to ensure that transportMode option of webpack-dev-server is set to ws for the feature to work.

• The gatsby import connects to the webpack-hot-middleware event source at either <hmrUrl> or <baseUrl>/__webpack_hmr, and listens for messages with the action built.