feat: allow loading webpack config by filename

Author: bahmutov

README.md

@@ -181,6 +181,19 @@ module.exports = on => {
 
 **Bonus:** re-using the config means if you create your application using `create-react-app --typescript`, then TypeScript transpile just works out of the box. See [bahmutov/try-cra-app-typescript](https://github.com/bahmutov/try-cra-app-typescript).
 
+## Your webpack config
+
+If you have your own webpack config, you can use included plugins file to load it. Here is the configuration using the included plugins file and passing the name of the config file via `env` variable in the `cypress.json` file
+
+```json
+{
+  "pluginsFile": "node_modules/cypress-react-unit-test/plugins/load-webpack",
+  "env": {
+    "webpackFilename": "demo/config/webpack.dev.js"
+  }
+}
+```
+
 ## Examples
 
 All components are in [src](src) folder. All tests are in [cypress/integration](cypress/integration) folder.

plugins/load-webpack/index.js

@@ -0,0 +1,45 @@
+// @ts-check
+const path = require('path')
+const debug = require('debug')('cypress-react-unit-test')
+const webpack = require('@cypress/webpack-preprocessor')
+const findWebpack = require('find-webpack')
+
+module.exports = (on, config) => {
+  require('@cypress/code-coverage/task')(on, config)
+
+  const webpackFilename = config.env && config.env.webpackFilename
+  if (!webpackFilename) {
+    throw new Error(
+      'Could not find "webpackFilename" option in Cypress env variables %o',
+      config.env,
+    )
+  }
+  debug('got webpack config filename %s', webpackFilename)
+  const resolved = path.resolve(webpackFilename)
+  debug('resolved webpack at %s', webpackFilename)
+  const webpackOptions = require(resolved)
+
+  debug('webpack options: %o', webpackOptions)
+
+  const coverageIsDisabled =
+    config && config.env && config.env.coverage === false
+  debug('coverage is disabled? %o', { coverageIsDisabled })
+
+  const opts = {
+    coverage: !coverageIsDisabled,
+  }
+
+  findWebpack.cleanForCypress(opts, webpackOptions)
+  debug('claned webpack options: %o', webpackOptions)
+
+  const options = {
+    webpackOptions,
+    watchOptions: {},
+  }
+
+  on('file:preprocessor', webpack(options))
+
+  // IMPORTANT to return the config object
+  // with the any changed environment variables
+  return config
+}