feat: add image rule for both plugins

Author: bahmutov

plugins/cra-v3/file-preprocessor.js

@@ -2,6 +2,7 @@
 const debug = require('debug')('cypress-react-unit-test')
 const findWebpack = require('find-webpack')
 const webpackPreprocessor = require('@cypress/webpack-preprocessor')
+const { addImageRedirect } = require('../utils/add-image-redirect')
 
 const getWebpackOptions = opts => {
   debug('top level opts %o', opts)
@@ -18,22 +19,7 @@ const getWebpackOptions = opts => {
   findWebpack.cleanForCypress(opts, webpackOptions)
   debug('claned webpack options: %o', webpackOptions)
 
-  // we need to handle static images and redirect them to
-  // the existing files. Cypress has fallthrough static server
-  // for anything like "/_root/<path>" which is perfect - because
-  // importing a static image gives us that <path>!
-  // insert our loader first before any built-in loaders kick in
-  const loaderRules = webpackOptions.module.rules.find(rule =>
-    Array.isArray(rule.oneOf),
-  )
-  if (loaderRules) {
-    debug('found oneOf rule %o', loaderRules.oneOf)
-    debug('adding our static image loader')
-    loaderRules.oneOf.unshift({
-      test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/],
-      loader: require.resolve('./redirect-resource'),
-    })
-  }
+  addImageRedirect(webpackOptions)
 
   const options = {
     webpackOptions,

plugins/load-webpack/index.js

@@ -3,6 +3,7 @@ const path = require('path')
 const debug = require('debug')('cypress-react-unit-test')
 const webpackPreprocessor = require('@cypress/webpack-preprocessor')
 const findWebpack = require('find-webpack')
+const { addImageRedirect } = require('../utils/add-image-redirect')
 
 module.exports = (on, config) => {
   require('@cypress/code-coverage/task')(on, config)
@@ -39,6 +40,8 @@ module.exports = (on, config) => {
   findWebpack.cleanForCypress(opts, webpackOptions)
   debug('claned webpack options: %o', webpackOptions)
 
+  addImageRedirect(webpackOptions)
+
   const options = {
     webpackOptions,
     watchOptions: {},

plugins/utils/add-image-redirect.js

@@ -0,0 +1,42 @@
+// @ts-check
+const debug = require('debug')('cypress-react-unit-test')
+
+/**
+ * Note: modifies the input options object
+ */
+function addImageRedirect(webpackOptions) {
+  if (!webpackOptions.module) {
+    debug('webpack options has no "module"')
+    return
+  }
+
+  if (!Array.isArray(webpackOptions.module.rules)) {
+    debug('webpack module rules is not an array')
+    return
+  }
+
+  // we need to handle static images and redirect them to
+  // the existing files. Cypress has fallthrough static server
+  // for anything like "/_root/<path>" which is perfect - because
+  // importing a static image gives us that <path>!
+  // insert our loader first before any built-in loaders kick in
+  const loaderRules = webpackOptions.module.rules.find(rule =>
+    Array.isArray(rule.oneOf),
+  )
+
+  const imageRedirectLoaderRule = {
+    test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/],
+    loader: require.resolve('./redirect-resource'),
+  }
+
+  if (loaderRules) {
+    debug('found oneOf rule %o', loaderRules.oneOf)
+    debug('adding our static image loader')
+    loaderRules.oneOf.unshift(imageRedirectLoaderRule)
+  } else {
+    debug('could not find oneOf rules, inserting directly into rules')
+    webpackOptions.module.rules.unshift(imageRedirectLoaderRule)
+  }
+}
+
+module.exports = { addImageRedirect }