Prevent external assets from being fetched?

[stevenvachon]

I'm replacing the document with HTML that contains external asses such as <link href> and <script src> and I'd like to prevent them from being fetched as to avoid seeing this error in my test logs:

DOMException [NetworkError]: Failed to execute "fetch()" on "Window" with URL "https://website/file": The operation was aborted.
    at Fetch.onError (file:///path/to/node_modules/happy-dom/src/fetch/Fetch.ts:670:4)

I tried stubbing the global fetch, but it affects nothing, which makes sense.

[capricorn86]

Hi @stevenvachon!

I believe that the errors are thrown when the window is closed during tear-down, as it will then abort all ongoing requests.

You can set the setting errorCapture to "processLevel" to improve error capturing and contain errors within the Window context during tear-down, however this setting doesn't work in test environments such as Vitest or Jest, as it collides with their process level error capturing. If the errors are captured already, you may want to consider disabling the console during tear down, perhaps by using the virtual console and stop listening for the "print" event.

To prevent certain requests from being fetched, you can use the setting fetch.interceptor, which makes it possible to intercept a fetch request and return a custom response.

import { Window } from "happy-dom";

const window = new Window({
   settings: {
      fetch: : {
         interceptor: {
            beforeAsyncRequest: async ({ request, window }) => {
               if (request.url === "https://website/file") {
                  return new window.Response("");
               }
            }
         }
      }
   }
});

[stevenvachon]

Hi, @capricorn86, thank you for the response!

I tried creating two test helpers out of the code you'd provided, but it doesn't appear to be used at all with my <iframe src> tests.

test.js:

beforeAll(() => suppressBackgroundRequests());

it('renders', () => render(<iframe src="http://anything" />));

helpers.js:

import { Window } from 'happy-dom';

const ORIGINAL_WINDOW = globalThis.window;

/**
 * @param {string[]} [urlStartsWith]
 */
export const suppressBackgroundRequests = (urlStartsWith) => {
  globalThis.window = new Window({
    settings: {
      fetch: {
        interceptor: {
          beforeAsyncRequest: async ({ request, window }) => {
            if (
              !urlStartsWith ||
              urlStartsWith.some((url) => request.url.startsWith(url))
            ) {
              console.log('SUPPRESSION TEST');
              return new window.Response('REQUEST SUPPRESSED');
            }
          },
        },
      },
    },
  });
};

export const unsuppressBackgroundRequests = () => {
  globalThis.window = ORIGINAL_WINDOW;
};

I still see "DOMException [NetworkError]" in the test logs and I never see "SUPPRESSION TEST".

[stevenvachon]

For now I'm using this:

export default () =>
  Object.defineProperty(HTMLIFrameElement.prototype, 'src', {
    configurable: true,
    get() {},
    set(value) {},
  });

[capricorn86]

@stevenvachon If you are using a test environment like Vitest or Jest, you need to set the options in the config for the environment.

Another way is to set the setting navigation.disableChildFrameNavigation to true. You can read more about the various settings in the API Documentation.

Example for Vitest:

export default defineConfig({
  test: {
    environment: 'happy-dom',
    environmentOptions: {
      happyDOM: {
        settings: {
          navigation: {
            disableChildPageNavigation: true,
            disableChildFrameNavigation: true
          }
        }
      }
    }
  }