Skip to content

Commit

Permalink
Update Babel to 7.13
Browse files Browse the repository at this point in the history
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)
  • Loading branch information
insin committed Apr 4, 2021
1 parent 2fd62e7 commit 4064757
Show file tree
Hide file tree
Showing 27 changed files with 332 additions and 314 deletions.
96 changes: 71 additions & 25 deletions CHANGES.md
Original file line number Diff line number Diff line change
@@ -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

Expand Down
2 changes: 1 addition & 1 deletion docs/BrowserSupport.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
16 changes: 3 additions & 13 deletions docs/Configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down Expand Up @@ -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:

Expand Down
2 changes: 1 addition & 1 deletion docs/Features.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
6 changes: 1 addition & 5 deletions docs/Testing.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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...
Expand Down
2 changes: 1 addition & 1 deletion docs/guides/ReactApps.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
Loading

0 comments on commit 4064757

Please sign in to comment.