--watch switch doesn't restart tests #11

TauPan · 2021-05-06T08:10:00Z

TauPan
May 6, 2021

Hi!

Introduction

Thanks for instant-mocha!

After upgrading webpack, it (almost, see below) flawlessly took on the job of mocha-webpack.

I have just one problem, which is that the --watch flag doesn't work for me. I decided to start to post here before reporting an issue, since I'm not sure that I'm doing everything correctly.

Sadly the project itself is in a private github repository, but I'll try to share as much as I can:

I'm starting the tests with cross-env BABEL_ENV=test instant-mocha --colors --require jsdom-global/register --require ignore-styles --require core-js/stable --require regenerator-runtime/runtime --webpack-config webpack.config.tests.js airshield/js/tests/ and the test-watch scriptlet puts the --watch flag at the end.

However if I start tests on the commandline with BABEL_ENV=test ./node_modules/.bin/instant-mocha --watch --colors --require jsdom-global/register --require ignore-styles --require core-js/stable --require regenerator-runtime/runtime --webpack-config webpack.config.tests.js airshield/js/tests/ (putting the --watch flag directly after the command), the behaviour is identical.

What do I expect to see:

Tests should restart when I change a javascript file.

What happens instead:

The screen clears but no tests are run.

Setup

package.json

Here's my package.json:

{
  "name": "airshield-cve-aggregation",
  "version": "0.21.0",
  "description": "Javascript support for AirShield-CVE-Aggregation",
  "main": "airshield",
  "engines": {
    "node": "*"
  },
  "private": true,
  "scripts": {
    "test": "cross-env BABEL_ENV=test instant-mocha --colors --require jsdom-global/register --require ignore-styles --require core-js/stable --require regenerator-runtime/runtime --webpack-config webpack.config.tests.js airshield/js/tests/",
    "test-watch": "yarn test --watch",
    "test-inspect": "cross-env BABEL_ENV=test node ${NODE_DEBUG_BRK} --inspect node_modules/.bin/mocha-webpack -t 99999999",
    "test-inspect-brk": "cross-env NODE_DEBUG_BRK='--inspect-brk' yarn test-debug",
    "webpack": "webpack --devtool source-map",
    "start": "yarn webpack && airshield-admin runserver",
    "watch": "yarn webpack  --config webpack.config.js --config  webpack.config.cache.js --merge --watch & airshield-admin runserver; pkill -f webpack",
    "testcafe-server-coverage": "cross-env DJANGO_SETTINGS_MODULE=airshield.settings_testcafe coverage run --append airshield/manage.py runserver 127.0.0.1:8003 --noreload",
    "testcafe-server": "cross-env DJANGO_SETTINGS_MODULE=airshield.settings_testcafe airshield-admin runserver 127.0.0.1:8003",
    "testcafe-db": "cross-env-shell DJANGO_SETTINGS_MODULE=airshield.settings_testcafe 'rm testcafe.sqlite3; if [ -r .testcafe-save.sqlite3 ] ; then cp .testcafe-save.sqlite3 testcafe.sqlite3; else airshield-admin migrate --run-syncdb; airshield-admin loaddata airshield/js/testcafe/data.json.gz; cp testcafe.sqlite3 .testcafe-save.sqlite3; fi'",
    "testcafe-browser-command": "cross-env DJANGO_SETTINGS_MODULE=airshield.settings_testcafe ${TC_COMMAND} ${TC_BROWSER} airshield/js/testcafe/\"test_*.js\" --hostname localhost --screenshots airshield/js/testcafe/screenshots ${TC_QUARANTINE} --concurrency=${TC_CONCURRENCY} --screenshots-on-fails --app-init-delay 3000 --app \"yarn testcafe-db; yarn testcafe-server --noreload || sleep 2; netcat -z -w 2 localhost 8003\"",
    "testcafe-browser": "cross-env TC_BROWSER=${TC_BROWSER:-chromium:headless} TC_COMMAND=${TC_COMMAND:-testcafe} TC_QUARANTINE=${TC_QUARANTINE---quarantine-mode} TC_CONCURRENCY=${TC_CONCURRENCY-1} yarn testcafe-browser-command",
    "testcafe-concurrent": "cross-env  TC_CONCURRENCY=${TC_CONCURRENCY-4} yarn testcafe-browser",
    "testcafe-nonconcurrent": "cross-env TC_CONCURRENCY=1 yarn testcafe-browser --test-meta concurrent=false",
    "testcafe-both": "tc_b() { yarn run testcafe-concurrent $*; yarn run testcafe-nonconcurrent $*; }; tc_b",
    "testcafe": "tc() { if [ \"$@\"x = x ]; then yarn run testcafe-both; else yarn run testcafe-browser \"$@\"; fi;}; tc",
    "testcafe-live": "yarn testcafe --live",
    "kill-headless": "pkill 'chrom.*--headless' -f"
  },
  "license": "GPL-3.0",
  "repository": {
    "type": "git",
    "url": "[email protected]:AirbusOperations/cve-aggregation.git"
  },
  "bugs": "https://github.com/AirbusOperations/cve-aggregation/issues",
  "devDependencies": {
    "@babel/core": "^7.14.0",
    "@babel/plugin-transform-runtime": "^7.13.15",
    "@babel/preset-env": "^7.14.0",
    "@babel/register": "^7.13.16",
    "babel-loader": "8.2.2",
    "babel-plugin-rewire-exports": "^2.3.0",
    "cross-env": "^7.0.3",
    "css-loader": "^5.2.4",
    "eslint": "^7.25.0",
    "exports-loader": "^2.0.0",
    "expose-loader": "^2.0.0",
    "file-loader": "^6.2.0",
    "handlebars-loader": "^1.4.0",
    "ignore-styles": "^5.0.1",
    "imports-loader": "^2.0.0",
    "instant-mocha": "^1.2.0",
    "jsdom": "^16.5.3",
    "jsdom-global": "^3.0.2",
    "less": "^4.1.1",
    "less-loader": "^8.1.1",
    "mocha": "^8.3.2",
    "sinon": "^10.0.0",
    "sinon-helpers": "^2.0.4",
    "style-loader": "^2.0.0",
    "testcafe": "^1.5.0",
    "url-loader": "^4.1.1",
    "webpack": "5.36.2",
    "webpack-cli": "^4.6.0",
    "webpack-node-externals": "^3.0.0"
  },
  "dependencies": {
    "bootstrap": "3",
    "bootstrap-multiselect": "0.9.13-1",
    "chosen-js": "^1.8.7",
    "core-js": "^3.11.2",
    "corejs-typeahead": "^1.0.1",
    "d3": "6.7.0",
    "d3-selection": "2.0.0",
    "datatables.net": "^1.10.12",
    "datatables.net-bs": "^1.10.12",
    "datatables.net-buttons": "^1.2.2",
    "datatables.net-buttons-bs": "^1.2.2",
    "datatables.net-buttons-dt": "^1.2.2",
    "datatables.net-colreorder": "^1.3.2",
    "datatables.net-colreorder-bs": "^1.3.2",
    "datatables.net-dt": "^1.10.12",
    "datatables.net-fixedheader": "^3.1.2",
    "datatables.net-fixedheader-bs": "^3.1.2",
    "datatables.net-responsive": "^2.1.0",
    "datatables.net-responsive-bs": "^2.1.0",
    "datatables.net-select": "^1.2.5",
    "datatables.net-select-bs": "^1.2.5",
    "eonasdan-bootstrap-datetimepicker": "^4.17.47",
    "handlebars": "*",
    "jquery": "3",
    "jquery-ui-slider": "^1.12.1",
    "moment": "^2.24.0",
    "moment-timezone": "^0.5.27",
    "regenerator-runtime": "^0.13.7",
    "underscore": "^1.8.3",
    "uuid": "^8.3.2",
    "yadcf": "https://github.com/TauPan/yadcf/"
  },
  "resolutions": {
    "jquery": "3",
    "useragent": "^2.1.13",
    "minimist": "^1.2.2"
  },
  "browserslist": [
    "defaults"
  ]
}

`webpack.config.js`:

var webpack = require("webpack");
var path = require('path');

module.exports = {
  entry: {"airshield": "./airshield/js/airshield.js"},
  mode: "production",
  target: ["web"],
  output: {
    path: __dirname + "/airshield" + "/static",
    filename: "js/[name].bundle.js",
    publicPath: "/airshield/static/",
    library: "[name]"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"]
      },
      {test: /\.(jpe?g|ttf|eot|svg|gif|png)$/,    loader: "file-loader" },
      {test: /\.js$/, exclude: /node_modules/,
       use: {loader: "babel-loader",
             options: {
               "sourceType": "unambiguous",
               presets: [['@babel/preset-env', {"corejs": 3,
                                                "useBuiltIns": "usage"}]],
               plugins: ['@babel/plugin-transform-runtime']
             }
            }
      },
      {test: /\.(woff|woff2)$/,
       loader: "url-loader",
       options: {limit: 10000,
                 mimetype: "application/font-woff"}},
      {
        test: require.resolve('sinon'),
        use: [{
          loader: 'imports-loader',
          options: {additionalCode: 'var define = false;'}
        }]
      },
      {
        test: require.resolve('jquery'),
        use: [{
          loader: 'expose-loader',
          options: {exposes: ['jQuery', '$']}
        }]
      },
      {
        test: require.resolve('underscore'),
        use: [{
          loader: 'expose-loader',
          options: {exposes: '_'}
        }]
      },
      {
        test: require.resolve('d3'),
        use: [{
          loader: 'expose-loader',
          options: {exposes: 'd3'}
        }]
      },
      {
        test: require.resolve('handlebars'),
        use: [{
          loader: 'expose-loader',
          options: {exposes: 'handlebars'}
        }]
      },
      {
        test: require.resolve('moment'),
        use: [{
          loader: 'expose-loader',
          options: {exposes: 'moment'}
        }]
      }
    ]
  },
  resolve: {
    modules: [
      "node_modules",
      "airshield/js"
    ],
    alias: {
      handlebars : "handlebars/dist/handlebars.js"
    }
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery",
      "window.$": "jquery",
      _: "underscore"
    })
  ],
  node: {
    // see https://stackoverflow.com/a/43626218/565224
    __dirname: true
  },
}

`webpack.config.tests.js`:

config = require("./webpack.config");

var nodeExternals = require('webpack-node-externals');

module.exports = Object.assign(
  config,
  {
    mode: "development",
    target: "node",
    externals: [nodeExternals()],
    devtool: 'inline-source-map',
    output: {
      // use absolute paths in sourcemaps (important for debugging via IDE)
      devtoolModuleFilenameTemplate: '[absolute-resource-path]',
      devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
    },
  });

`.babelrc`:

{
  "presets": [["@babel/preset-env",
               {"corejs": 3, "useBuiltIns": "usage"}]],

  "env": {
    "test": {
      "plugins": ["rewire-exports"]
    }
  }
}

Not sure if I missed anything. The point is that the tests are running
the first time (correctly) but the watch flag just causes the screen
to clear and nothing else.

Best Regards and thanks in advance for your help!
Friedel

TauPan · 2021-05-06T09:44:41Z

TauPan
May 6, 2021
Author

I have one additional observation:

If I have an error in the changed javascript code, I get the error message from webpack after the screen (terminal window) blanks. As soon as I correct it, the screen stays blank.

So webpack updates the bundle (or tries to) apparently.

0 replies

privatenumber · 2021-05-07T16:46:33Z

privatenumber
May 7, 2021
Maintainer

Thanks for your question!

Seeing you're on Webpack 5 now, I'm curious if it could be a WP 5 issue (although you did mention the first build works...).

Have you confirmed your Webpack 5 upgrade was successful in an isolated environment?

When migrating to instant-mocha for the Webpack 4 -> 5 upgrade, I recommend setting up instant-mocha with Webpack 4 first, making sure everything works, then upgrading to Webpack 5.

Also, do you mind sharing your full Webpack config? Alternatively, if you can duplicate your repo and remove everything sensitive, and push it to a new repo as a minimal reproduction of the problem, that would work best for me.

5 replies

TauPan May 10, 2021
Author

Hi!

Seeing you're on Webpack 5 now, I'm curious if it could be a WP 5 issue (although you did mention the first build works...).

Have you confirmed your Webpack 5 upgrade was successful in an isolated environment?

Everything else works with webpack 5 in my project.

What do you mean by isolated environment?

When migrating to instant-mocha for the Webpack 4 -> 5 upgrade, I recommend setting up instant-mocha with Webpack 4 first, making sure everything works, then upgrading to Webpack 5.

I migrated to webpack 4 directly before migrating to webpack 5 (because the step from 3 directly to 5 was too complex) and just went back to that commit.

I can confirm that instant-mocha works perfectly with webpack 4, so it might be a webpack 5 issue.

Directly afterwards I upgraded to webpack 5 (which entails upgrades to most plugins and all of babel). If I go to that commit, I see the behaviour I described.

Also, do you mind sharing your full Webpack config?

I did share my full webpack config in the first post. Or is anything missing?

Alternatively, if you can duplicate your repo and remove everything sensitive, and push it to a new repo as a minimal reproduction of the problem, that would work best for me.

That might be a bit of work, I'll see when I can find time for this. Maybe there's something you can already reproduce or see from the configs I gave above?

Best regards and thanks!
Friedel

privatenumber May 20, 2021
Maintainer

"Isolated environment" as in, confirm that the Webpack 5 upgrade was successful and that change alone so you know there are no other factors interfering.

And my bad, I didn't see the base Webpack config.

I just added a test to confirm watch is working with both Webpack 4 & 5 here.

I also released a fix to clear the terminal as soon as the compilation starts instead of when it ends, since that looked like the watch wasn't responding when the build is large.

Can you try out v1.2.1 and see if it solves your problem?

TauPan Jun 2, 2021
Author

I just tried with v1.2.1 and the behaviour is still the same for me.

Since you're testing with webpack 5 now, that might mean that something in my webpack config and/or some other modules are interfering here.

I Don't know when I'll be able to do more tests, since I'm currently content with watchmedo shell-command --patterns '*.js;*.html;*.json;*.css;*.less;*.scss' --recursive --drop --command='time yarn test 2>&1' as a workaround. (watchmedo is python but the most code in my project is python anyways.

privatenumber Jun 2, 2021
Maintainer

Thanks for checking and glad you have a workaround.

No promises but if you'd like, you can invite me to your private repo or email me a copy of it so I can debug next time I find time for this.

TauPan Jun 3, 2021
Author

No promises but if you'd like, you can invite me to your private repo or email me a copy of it so I can debug next time I find time for this.

I really appreciate your offer, but I'm afraid it's out of my hands to invite anybody to that repo.

Best regards!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

--watch switch doesn't restart tests #11

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 5 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

--watch switch doesn't restart tests #11

TauPan May 6, 2021

Introduction

What do I expect to see:

What happens instead:

Setup

package.json

webpack.config.js:

webpack.config.tests.js:

.babelrc:

Replies: 2 comments · 5 replies

TauPan May 6, 2021 Author

privatenumber May 7, 2021 Maintainer

TauPan May 10, 2021 Author

privatenumber May 20, 2021 Maintainer

TauPan Jun 2, 2021 Author

privatenumber Jun 2, 2021 Maintainer

TauPan Jun 3, 2021 Author

TauPan
May 6, 2021

`webpack.config.js`:

`webpack.config.tests.js`:

`.babelrc`:

Replies: 2 comments 5 replies

TauPan
May 6, 2021
Author

privatenumber
May 7, 2021
Maintainer

TauPan May 10, 2021
Author

privatenumber May 20, 2021
Maintainer

TauPan Jun 2, 2021
Author

privatenumber Jun 2, 2021
Maintainer

TauPan Jun 3, 2021
Author