Watch non-spec files for changes and reload specs

Many of our users express the need to want to watch files on their system other than the *spec files that we normally watch.

Although we currently watch the spec file you’re currently working in (and all of the subdependencies) many of our users express the need to watch other files (like their src files) for e2e/integration tests.

We should do one or both options:

a) give you the ability to specific additional glob paths via cypress.json b) give you the ability to watch things yourself and signal to cypress when to reload

With our upcoming CLI refactor we could offer something like this…

const chokidar = require('chokidar')
const cypress = require('cypress')

chokidar.watch(FILES)
.on('update', () => {
  cypress.reload()
})

cypress.open()

[kuceb]

Reloading alongside webpack-dev-server

@jsphstls This is what I use: I listen for webpack-dev-server HMR logs in the console, and trigger a re-run, as described here https://stackoverflow.com/questions/52231111/re-run-cypress-tests-in-gui-when-webpack-dev-server-causes-page-reload/57980326#57980326

Edit: But you should use Svish’s package below

[Svish]

The method shared by @Bkucera doesn’t work for me, as there’s no such message being printed in the console. Agreeing with @jsphstls, that HMR already keeps track of changes, I decided to try hook into that. Ended up putting the result of the experiment in a simple package, and it seems to work pretty well on my machine with create-react-app at least 🙂👍

It connects to the webpack-dev-server socket and listens for HMR messages of type invalid, and if any arrive, it clicks the restart button after a short delay.

➡ https://www.npmjs.com/package/cypress-hmr-restarter