https://github.com/svish/cypress-hmr-restarter

A Cypress plugin which restarts tests on webpack-dev-server HMR updates
https://github.com/svish/cypress-hmr-restarter

cypress hmr webpack webpack-dev-server

Last synced: 3 months ago
JSON representation

A Cypress plugin which restarts tests on webpack-dev-server HMR updates

• Host: GitHub
• URL: https://github.com/svish/cypress-hmr-restarter
• Owner: Svish
• Created: 2019-12-13T12:39:48.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-10-07T04:35:32.000Z (over 1 year ago)
• Last Synced: 2024-09-21T13:49:58.460Z (5 months ago)
• Topics: cypress, hmr, webpack, webpack-dev-server
• Language: JavaScript
• Size: 906 KB
• Stars: 22
• Watchers: 2
• Forks: 6
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# cypress-hmr-restarter

A rudimentary [Cypress](https://www.cypress.io/) plugin(?) for automatically restarting tests after Webpack [Hot Module Replacement](https://webpack.js.org/concepts/hot-module-replacement/) (HMR) updates.

[![npm version](https://img.shields.io/npm/v/cypress-hmr-restarter.svg?style=flat-square) ![npm downloads](https://img.shields.io/npm/dm/cypress-hmr-restarter?style=flat-square)](https://www.npmjs.com/package/cypress-hmr-restarter)

## Setup

### 1. Install

```shell

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

```

### 2. Import

```js

// 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

```jsonc

// E.g. in cypress.json

{

  // Works with e.g. default create-react-app configuration

  "baseUrl": "http://localhost:3000"

}

```

## Options

```jsonc

{

  // 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](https://docs.cypress.io/guides/core-concepts/test-runner.html) (`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`](https://www.npmjs.com/package/webpack-dev-server) websocket at either `` or `ws:///sockjs-node` (`wss:` if `https:`), and listens for messages with the type `invalid`.

  **IMPORTANT:** You need to ensure that [`transportMode`](https://webpack.js.org/configuration/dev-server/#devservertransportmode) option of `webpack-dev-server` is set to `ws` for the feature to work.

- The gatsby import connects to the [`webpack-hot-middleware`](https://www.npmjs.com/package/webpack-hot-middleware) event source at either `` or `/__webpack_hmr`, and listens for messages with the action `built`.