feat: redirect images to __root

Author: bahmutov

plugins/cra-v3/file-preprocessor.js

@@ -18,6 +18,23 @@ 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'),
+    })
+  }
+
   const options = {
     webpackOptions,
     watchOptions: {},

plugins/cra-v3/redirect-resource.js

@@ -0,0 +1,23 @@
+const debug = require('debug')('cypress-react-unit-test')
+const path = require('path')
+
+/**
+ * User code:
+ *   import image from './path/to/image.png'
+ *   <img src={image} />
+ * This loader will return you
+ *   image is "/__root/path/to/image.png"
+ *   <img src={image} />
+ */
+function staticResourceLoader() {
+  debug('loading static resource %s', this.resourcePath)
+  debug('cwd', process.cwd())
+  const relativeResourcePath = path.relative(process.cwd(), this.resourcePath)
+  debug('relative resource', relativeResourcePath)
+  const staticResourceUrl = `/__root/${relativeResourcePath}`
+  debug('static resource url: %s', staticResourceUrl)
+
+  return `module.exports = ${JSON.stringify(staticResourceUrl)}`
+}
+
+module.exports = staticResourceLoader