Update Babel to 7.13

Update Karma to 6.x Update Webpack to 5.x and update all loaders Finally dropped PhantomJS - Karma tests now use ChromeHeadless by default Internal -Babel config changes - Set the configured browserslist the new top-level option in Babel 7.13, instead of in @babel/preset-env's options - Drop the useESModules option for @babel/plugin-transform-runtime, which was deprecated in Babel 7.13 - Karma config changes - karma-webpack 5.x now requires 'webpack' to be listed in frameworks config - Karma Server now requires a config object to be passed through a parseConfig() call - Shim the global process variable in the test Webpack config, as one of expect's dependencies uses it - Webpack 5 config changes - Set optimization.nodeEnv = false to prevent webpack defining process.env.NODE_ENV via DefinePlugin to prevent a new warning from DefinePlugin about this conflicting with the value nwb sets - Removed optimization.noEmitOnErrors - postcss-loader now expects options in a postCssOptions object and no longer needs an ident option - optimization.splitChunks.cacheGroups.vendors was renamed to defaultVendors - Fix Webpack devtool config in Karma config - Replace optimize-css-assets-webpack-plugin with css-minimizer-webpack-plugin to avoid a deprecation warning - Source is no longer available from the Webpack stats object, calculate gzip file sizes from the output assets instead - Use Source.source() when inlining the runtime chunk into generated HTML and remove the new default defer attribute from its script - Remove removed watchOptions option - Remove removed logLeval option for webpack middleware - use stats: 'none' instead - Stopped forcing process.env.NODE_ENV to 'test' before running a Karma server, as DefinePlugin was creating conflicting values warnings - Fix serve config so it's not using a fixed output filename (causes an error when used in express middleware) - Don't set NODE_ENV to test when running tests (fixes DefinePlugin warning with express middleware test)
insin · Apr 4, 2021 · 4064757 · 4064757
1 parent 2fd62e7
commit 4064757
Show file tree

Hide file tree

Showing 27 changed files with 332 additions and 314 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -1,30 +1,76 @@
+# Unreleased (in `master`)
+
+## Breaking Changes
+
+- Updated to Webpack 5 and updated all plugins and loaders - custom configuration for any of these could now be invalid.
+
+- Dropped use of PhantomJS - the default browser for Karma testing is now `ChromeHeadless` and Chrome must be available wherever tests are going to be run.
+
+## Changes
+
+- Updated to Babel 7.13
+- Updated to Karma 6 and Mocha 8
+
 ## Dependencies
 
-- @babel/cli: v7.8.4 → [v7.10.3](https://github.com/babel/babel/blob/master/CHANGELOG.md#v7102-2020-05-30)
-- @babel/core: v7.9.6 → [v7.10.3](https://github.com/babel/babel/blob/master/CHANGELOG.md#v7102-2020-05-30)
-- @babel/plugin-proposal-nullish-coalescing-operator: v7.8.3 → [v7.10.1](https://github.com/babel/babel/blob/master/CHANGELOG.md#v7101-2020-05-27)
-- @babel/plugin-proposal-optional-chaining: v7.9.0 → [v7.10.3](https://github.com/babel/babel/blob/master/CHANGELOG.md#v7100-2020-05-26)
-- @babel/plugin-syntax-jsx: v7.8.3 → [v7.10.1](https://github.com/babel/babel/blob/master/CHANGELOG.md#v7101-2020-05-27)
-- @babel/plugin-transform-react-constant-elements: v7.9.0 → [v7.10.1](https://github.com/babel/babel/blob/master/CHANGELOG.md#v7101-2020-05-27)
-- @babel/plugin-transform-react-jsx: v7.9.4 → [v7.10.3](https://github.com/babel/babel/blob/master/CHANGELOG.md#v7100-2020-05-26)
-- @babel/plugin-transform-runtime: v7.9.6 → [v7.10.3](https://github.com/babel/babel/blob/master/CHANGELOG.md#v7100-2020-05-26)
-- @babel/polyfill: v7.8.7 → [v7.10.1](https://github.com/babel/babel/blob/master/CHANGELOG.md#v7101-2020-05-27)
-- @babel/preset-env: v7.9.6 → [v7.10.3](https://github.com/babel/babel/blob/master/CHANGELOG.md#v7100-2020-05-26)
-- @babel/preset-flow: v7.9.0 → [v7.10.1](https://github.com/babel/babel/blob/master/CHANGELOG.md#v7101-2020-05-27)
-- @babel/preset-react: v7.9.4 → [v7.10.1](https://github.com/babel/babel/blob/master/CHANGELOG.md#v7101-2020-05-27)
-- @babel/runtime: v7.9.6 → [v7.10.3](https://github.com/babel/babel/blob/master/CHANGELOG.md#v7100-2020-05-26)
-- @pmmmwh/react-refresh-webpack-plugin: v0.3.1 → [v0.3.3](https://github.com/pmmmwh/react-refresh-webpack-plugin/releases)
-- autoprefixer: v9.8.0 → [v9.8.4](https://github.com/postcss/autoprefixer/blob/master/CHANGELOG.md#984)
-- babel-plugin-inferno: v6.1.0 → v6.1.1
-- chalk: v4.0.0 → [v4.1.0](https://github.com/chalk/chalk/releases/tag/v4.1.0)
-- copy-webpack-plugin: v6.0.1 → [v6.0.2](https://github.com/webpack-contrib/copy-webpack-plugin/blob/master/CHANGELOG.md#602-2020-06-03)
-- cross-spawn: v7.0.2 → [v7.0.3](https://github.com/moxystudio/node-cross-spawn/blob/master/CHANGELOG.md#703-2020-05-25)
-- css-loader: v3.5.3 → [v3.6.0](https://github.com/webpack-contrib/css-loader/blob/master/CHANGELOG.md#360-2020-06-13)
-- fs-extra: v9.0.0 → [v9.0.1](https://github.com/jprichardson/node-fs-extra/blob/master/CHANGELOG.md#901--2020-06-03)
-- inquirer: v7.1.0 → [v7.2.0](https://github.com/SBoudrias/Inquirer.js/releases/tag/inquirer%407.2.0)
-- karma: v5.0.9 → [v5.1.0](https://github.com/karma-runner/karma/blob/master/CHANGELOG.md#510-2020-06-11)
-- react-refresh: v0.8.2 → [v0.8.3](https://github.com/facebook/react/commits/3ca1904b37ad1f527ff5e31b51373caea67478c5/packages/react-refresh)
-- terser-webpack-plugin: v3.0.1 → [v3.0.6](https://github.com/webpack-contrib/terser-webpack-plugin/blob/master/CHANGELOG.md#306-2020-06-18)
+### Added
+
+- postcss: v8.2.9
+
+### Changed
+
+- @babel/cli: v7.10.3 → v7.13.14
+- @babel/core: v7.10.3 → v7.13.14
+- @babel/plugin-syntax-jsx: v7.10.1 → v7.12.13
+- @babel/plugin-transform-react-constant-elements: v7.10.1 → v7.13.13
+- @babel/plugin-transform-react-jsx: v7.10.3 → v7.13.12
+- @babel/plugin-transform-runtime: v7.10.3 → v7.13.10
+- @babel/preset-env: v7.10.3 → v7.13.12
+- @babel/preset-react: v7.10.1 → v7.13.13
+- @babel/runtime: v7.10.3 → v7.13.10
+- @pmmmwh/react-refresh-webpack-plugin: v0.3.3 → v0.4.3
+- autoprefixer: v9.8.4 → v10.2.5
+- babel-loader: v8.1.0 → v8.2.2
+- babel-plugin-add-module-exports: v1.0.2 → v1.0.4
+- babel-preset-proposals: v0.3.0 → v0.4.0
+- case-sensitive-paths-webpack-plugin: v2.3.0 → v2.4.0
+- copy-webpack-plugin: v6.0.2 → v8.1.0
+- cross-env: v7.0.2 → v7.0.3
+- css-loader: v3.6.0 → v5.2.0
+- css-minimizer-webpack-plugin: v1.3.0
+- debug: v4.1.1 → v4.3.1
+- file-loader: v6.0.0 → v6.2.0
+- fs-extra: v9.0.1 → v9.1.0
+- gzip-size: v5.1.1 → v6.0.0
+- html-webpack-plugin: v4.3.0 → v5.3.1
+- inquirer: v7.2.0 → v8.0.0
+- karma: v5.1.0 → v6.3.2
+- karma-coverage: v2.0.2 → v2.0.3
+- karma-sourcemap-loader: v0.3.7 → v0.3.8
+- karma-webpack: v4.0.2 → v5.0.0
+- mini-css-extract-plugin: v0.9.0 → v1.4.0
+- mocha: v7.1.2 → v8.3.2
+- open: v7.0.4 → v8.0.4
+- ora: v4.0.4 → v5.4.0
+- postcss-loader: v3.0.0 → v5.2.0
+- react-refresh: v0.8.3 → v0.10.0
+- resolve: v1.17.0 → v1.20.0
+- run-series: v1.1.8 → v1.1.9
+- semver: v7.3.2 → v7.3.5
+- style-loader: v1.2.1 → v2.0.0
+- terser-webpack-plugin: v3.0.6 → v5.1.1
+- url-loader: v4.1.0 → v4.1.1
+- version: v0.25.2 → v0.26.0
+- webpack: v4.43.0 → v5.30.0
+- webpack-dev-middleware: v3.7.2 → v4.1.0
+- webpack-dev-server: v3.11.0 → v3.11.2
+
+### Removed
+
+- @babel/polyfill
+- karma-phantomjs-launcher
+- optimize-css-assets-webpack-plugin
+- phantomjs-prebuilt
 
 # 0.25.2 / 2020-05-20
 

diff --git a/docs/BrowserSupport.md b/docs/BrowserSupport.md
@@ -13,7 +13,7 @@ nwb uses the following [Browserslist](https://github.com/browserslist/browsersli
 
 These are used to configure:
 
-- [`@babel/preset-env`'s `targets` option](https://babeljs.io/docs/en/babel-preset-env#targets), so it only transpiles the necessary ECMAScript 2015+ for supported browsers.
+- [Babel's `targets` option](https://babeljs.io/docs/en/options#targets), so it only transpiles the necessary ECMAScript 2015+ for supported browsers.
 - [Autoprefixer's `overrideBrowserslist` option](https://github.com/postcss/autoprefixer#options), so it only includes the necessary CSS prefixes for supported browsers.
 
 ### Configuring Browser Support

diff --git a/docs/Configuration.md b/docs/Configuration.md
@@ -598,7 +598,7 @@ Set to `false` to disable extraction of `.css` files in builds (in which case [`
 
 ##### `html`: `Object`
 
-Configures [options for `HtmlWebpackPlugin`](https://github.com/ampedandwired/html-webpack-plugin#readme).
+Configures [options for `HtmlWebpackPlugin`](https://github.com/jantimon/html-webpack-plugin#readme).
 
 For apps, nwb will look for a `src/index.html` template to inject `<link>` and `<script>` tags into for CSS and JavaScript bundles generated by Webpack.
 
@@ -946,21 +946,11 @@ Karma configuration can be provided in a `karma` object, using the following pro
 
 ##### `browsers`: `Array<String | Plugin>`
 
-> Default: `['PhantomJS']`
+> Default: `['ChromeHeadless']`
 
 A list of browsers to run tests in.
 
-PhantomJS is the default as it's installed by default with nwb and should be able to run in any environment.
-
-The launcher plugin for Chrome is also included, so if you want to run tests in Chrome, you can just name it:
-
-```js
-module.exports = {
- karma: {
- browsers: ['Chrome']
- }
-}
-```
+The launcher plugiun for Chrome is included with nwb, but requires that you have a version of Chrome installed in the environment the tests will be run in.
 
 For other browsers, you will also need to supply a plugin and manage that dependency yourself:
 

diff --git a/docs/Features.md b/docs/Features.md
@@ -21,7 +21,7 @@
 
 **Testing:**
 
-- Run unit tests with Karma in PhantomJS, using [Mocha](https://mochajs.org/) and [Expect](https://github.com/mjackson/expect#expect1x-documentation), without any configuration.
+- Run unit tests with Karma in headless Chrome, using [Mocha](https://mochajs.org/) and [Expect](https://github.com/mjackson/expect#expect1x-documentation), without any configuration.
 - Flexible defaults allow tests to be organised using a number of naming schemes, with tests in a separate directory, co-located with the code, or both.
 - Code coverage reporting.
 - Project skeletons ready to run tests on Travis CI and post code coverage results to Coveralls/codecov.io.

diff --git a/docs/Testing.md b/docs/Testing.md
@@ -22,7 +22,7 @@ nwb uses [Karma](http://karma-runner.github.io/) as a test runner, with [Webpack
 
 #### Browsers
 
-Karma runs tests in Phantom JS, which is installed automatically with nwb.
+Karma runs tests in Chrome, which must be installed on the machine the tests are running on.
 
 > To configure this, provide [`karma.browsers` config](/docs/Configuration.md#browsers-string--arrayplugin)
 
@@ -134,10 +134,6 @@ module.exports = {
 
 **Note:** if you provide `karma.testContext` and your tests would not have been picked up by the [default test files][#test-files] config, you will also need to provide a suitable [`karma.testFiles` config](/docs/Configuration.md#testcontext-string) so your tests can be excluded from code coverage.
 
-#### Automatic Babel Polyfill
-
-A context module is commonly used to load polyfills to allow tests to run in browsers missing certain features, but you don't need to worry about that if you were just going to use `@babel/polyfill` - nwb automatically injects Babel's polyfill into Karma tests for you.
-
 #### Configuring Testing Libraries
 
 Use a context module you need to configure testing libraries before running any tests. E.g. if you're using [Enzyme](https://github.com/airbnb/enzyme) to test some React code...

diff --git a/docs/guides/ReactApps.md b/docs/guides/ReactApps.md
@@ -249,7 +249,7 @@ You can [view the live version of the app here](http://insin.github.io/nwb-think
 
 ## Testing
 
-nwb provides a default testing setup which uses Karma to run tests written with Mocha and Expect in the headless PhantomJS browser.
+nwb provides a default testing setup which uses Karma to run tests written with Mocha and Expect in a headless Chrome browser.
 
 > The [Testing documentation](/docs/Testing.md) provides an in-depth overview of what nwb's default testing setup provides (and how to configure things to your liking if you want to), but we'll stick to the defaults and repurpose the initial test in the `tests/` directory to test the `ProductTable` component.