feat: if serving outside resource, serve base64 image

Author: bahmutov

package-lock.json

@@ -102,7 +102,8 @@
     "@cypress/webpack-preprocessor": "4.1.3",
     "babel-plugin-istanbul": "6.0.0",
     "debug": "4.1.1",
-    "find-webpack": "1.4.0"
+    "find-webpack": "1.4.0",
+    "mime-types": "2.1.26"
   },
   "release": {
     "branches": [

package.json

@@ -1,5 +1,6 @@
 const debug = require('debug')('cypress-react-unit-test')
 const path = require('path')
+const mime = require('mime-types')
 
 /**
  * User code:
@@ -9,11 +10,20 @@ const path = require('path')
  *   image is "/__root/path/to/image.png"
  *   <img src={image} />
  */
-function staticResourceLoader() {
+function staticResourceLoader(content) {
   debug('loading static resource %s', this.resourcePath)
   debug('cwd', process.cwd())
   const relativeResourcePath = path.relative(process.cwd(), this.resourcePath)
   debug('relative resource', relativeResourcePath)
+
+  if (relativeResourcePath.startsWith('..')) {
+    debug('resource is outside of the current working directory')
+    debug('inlining it instead (performance hit!)')
+    const mimetype = mime.lookup(this.resourcePath)
+    const encoded = content.toString('base64')
+    return `module.exports = "data:${mimetype};base64,${encoded}"`
+  }
+
   const staticResourceUrl = `/__root/${relativeResourcePath}`
   debug('static resource url: %s', staticResourceUrl)