webp imports do not work in Vitest (but work fine in Vite with the same config)

[kaiyoma]

Describe the bug

I am migrating to both Vite and Vitest (at the same time) and my UI has components that import .webp files. The UI and Vitest are sharing the same config and the UI is working fine, but any tests that indirectly imports a .webp is failing:

TypeError: Unknown file extension ".webp" for C:\Users\kgetz\Work\event-viewer\lib\geiger-vendor\dist\images\arista\5310-F.webp
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Serialized Error: {
  "code": "ERR_UNKNOWN_FILE_EXTENSION",
}
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

 Test Files  1 failed (1)

Reproduction

Import a .webp file in a component, then include that component in a Vite UI and a Vitest unit test.

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
    Memory: 5.58 GB / 15.71 GB
  Binaries:
    Node: 16.19.1 - C:\Program Files\Node.js\node.EXE
    npm: 9.6.2 - C:\Program Files\Node.js\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.1702.0), Chromium (113.0.1774.50)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @vitejs/plugin-react: 4.0.0 => 4.0.0
    vite: 4.3.8 => 4.3.8
    vitest: 0.31.0 => 0.31.0

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[kaiyoma]

@sheremet-va I noticed you started working on a possible fix. Is there any kind of workaround I can employ locally for now? This problem is affecting almost a hundred of my unit test suites and I'd like to make some progress.

[sheremet-va]

@sheremet-va I noticed you started working on a possible fix. Is there any kind of workaround I can employ locally for now? This problem is affecting almost a hundred of my unit test suites and I'd like to make some progress.

You can add your dist directory to test.deps.inline:

export default defineConfig({
  test: {
    deps: {
      inline: [/package-name\/dist/]
    }
  }
})

[kaiyoma]

Thanks! Actually, I just tried the latest version and that fixes my problem too. Thanks for the fix!