fix: direct file-loader at __root (#298)

this allows relative resources like fonts to be served by Cypress

Author: bahmutov

examples/react-scripts/README.md

@@ -12,3 +12,5 @@ npm test
 ```
 
 ![App test](images/app-test.png)
+
+The spec [src/Logo.cy-spec.js](src/Logo.cy-spec.js) directly imports SVG into React spec file. The spec [src/resources.cy-spec.js](src/resources.cy-spec.js) confirm that static resources like SVG and fonts load correctly.

examples/react-scripts/src/App.css

@@ -22,6 +22,7 @@
   justify-content: center;
   font-size: calc(10px + 2vmin);
   color: white;
+  font-family: 'MyFont';
 }
 
 .App-link {
@@ -36,3 +37,8 @@
     transform: rotate(360deg);
   }
 }
+
+@font-face {
+  font-family: 'MyFont';
+  src: local('MyFont'), url(./Inter-Regular.woff) format('woff');
+}

examples/react-scripts/src/Inter-Regular.woff

@@ -0,0 +1,35 @@
+/// <reference types="cypress" />
+import React from 'react'
+import App from './App'
+import { mount } from 'cypress-react-unit-test'
+
+describe('static resources', () => {
+  const findResource = name => {
+    return window.performance
+      .getEntriesByType('resource')
+      .find(item => item.name.endsWith(name))
+  }
+
+  it.only('loads SVG', () => {
+    // checking if a static resource like a font has loaded
+    // based on the recipe "Waiting for static resource"
+    // https://github.com/cypress-io/cypress-example-recipes#testing-the-dom
+    mount(<App />)
+
+    // use wrap + .should() to retry the callback function
+    cy.wrap().should(() => {
+      const foundResource = findResource('logo.svg')
+      expect(foundResource).to.have.property('initiatorType', 'img')
+    })
+  })
+
+  it('loads font', () => {
+    // https://github.com/bahmutov/cypress-react-unit-test/issues/284
+    mount(<App />)
+
+    cy.wrap().should(() => {
+      const foundResource = findResource('Inter-Regular.woff')
+      expect(foundResource).to.have.property('initiatorType', 'css')
+    })
+  })
+})

examples/react-scripts/src/resources.cy-spec.js

@@ -15,6 +15,8 @@ function addImageRedirect(webpackOptions) {
     return
   }
 
+  debug('adding image redirect to %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
@@ -26,13 +28,28 @@ function addImageRedirect(webpackOptions) {
 
   const imageRedirectLoaderRule = {
     test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/],
-    loader: require.resolve('./redirect-resource'),
+    loader: require.resolve('./redirect-image-resource'),
   }
 
   if (loaderRules) {
     debug('found oneOf rule %o', loaderRules.oneOf)
     debug('adding our static image loader')
     loaderRules.oneOf.unshift(imageRedirectLoaderRule)
+
+    // while we are here, let's change file loader
+    // to point it at the /__root/... path
+    const fileLoader = loaderRules.oneOf[loaderRules.oneOf.length - 1]
+    if (
+      fileLoader &&
+      fileLoader.loader &&
+      fileLoader.loader.includes('file-loader')
+    ) {
+      if (fileLoader.options && fileLoader.options.name) {
+        debug('setting file-loader to output /__root')
+        fileLoader.options.name = '/__root/[path][name].[ext]'
+        debug('file loader %o', fileLoader)
+      }
+    }
   } else {
     debug('could not find oneOf rules, inserting directly into rules')
     webpackOptions.module.rules.unshift(imageRedirectLoaderRule)