Unable to use alias to stub PNGs inside a module

[Spence1115]

Describe the bug

My library imports another library that has a component that includes a PNG file. This is causing a SyntaxError: Invalid or unexpected token on Vitest on my library.

@some_module/framework/Avatar.tsx
---

import iconSrc from '../../../../static/images/icon.png'

This is the bit that causes the error. I've tried aliasing it

export default defineConfig({
  test: {
    alias: {
      '.*\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
        './mocks/fileMock.js',
    }
  }
})

But I'm not convinced it is paying any attention to that mock. Am I missing something?

Reproduction

Set up a library with a component like

@some_module/framework/Avatar.tsx
---

import iconSrc from '../../../../static/images/icon.png'

Import that library and try to test any component.

System Info

Packages '{vitest,@vitest/*,vite,@vitejs/*}' --binaries --browsers



  System:
    OS: macOS 13.0
    CPU: (10) arm64 Apple M1 Pro
    Memory: 245.44 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.14.2 - ~/n/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 8.5.0 - ~/n/bin/npm
  Browsers:
    Brave Browser: 114.1.52.129
    Chrome: 114.0.5735.198
    Safari: 16.1
  npmPackages:
    @vitejs/plugin-react: ^4.0.0 => 4.0.3 
    vite: ^4.3.1 => 4.4.2 
    vitest: ^0.33.0 => 0.33.0 

### Used Package Manager

yarn

### Validations

- [X] Follow our [Code of Conduct](https://github.com/vitest-dev/vitest/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/vitest-dev/vitest/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://vitest.dev/guide/).
- [X] Check that there isn't [already an issue](https://github.com/vitest-dev/vitest/issues) that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/vitest-dev/vitest/discussions) or join our [Discord Chat Server](https://chat.vitest.dev).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.

[sheremet-va]

Alias is relative to the file the import is located in. Use absolute paths in resolve.alias

[Spence1115]

@sheremet-va I tried that, still couldn't get it to mock it ever, no matter which versions I tried

alias: {
  '@some_module/framework/static/images/icon.png': 'foo',
  'node_modules/@some_module/framework/static/images/icon.png': 'foo',
  './node_modules/@some_module/framework/static/images/icon.png': 'foo',
}

Nothing seemed to change so my assumption was, it still wasn't mocking anything.

[sheremet-va]

You can use array syntax with find option as a regexp. This alias is applied to imports that are written in your source code and not to resolved files, so you don't need to reference node_modules.

{
  find: /\.png$/,
  replacement: resolve("./mock.js")
}

[ardunster]

I'm trying to mock *.svg imports currently and it sounds like something like this would probably do what I need, but you don't say where this goes, and trying to add an object child to resolve.alias, or convert resolve.alias to an array (in defineConfig in vitest.config.ts), immediately borks the entire file. Where exactly is this supposed to go?

Edit: Nevermind, I see that I had to change the syntax of the existing alias from '@': path.resolve(__dirname, './src'), to

{
  find: '@',
  replacement: path.resolve(__dirname, './src'),
},

Still haven't solved my issue but might be one step closer.

[toomanychrises]

@ardunster did you ever find a solution to this? I have my own post about svg issues and cannot seem to find a solution #5271

[ardunster]

Not to my satisfaction. At the moment, we have just one .svg file directly imported that was causing issues (the ones we imported via another package seem to be okay), and I just mocked it individually in my test setup file, something like this:

vi.mock('@/assets/icons/filename.svg', () => {
  return {
    default: () => <>Mocked SVG</>,
  }
})

This would be a big pain point if we had multiple SVGs to mock, though.

[tamirgilany]

Hello,

I have a similar issue where I use a package that has a component that imports a gif.
When I run Vitest I get the following error:

SyntaxError: Invalid or unexpected token
 ❯ Object.<anonymous> node_modules/<packagename>/dist/components/Experiences/Birthday/Birthday.js:24:49

When I click on it I'm redirected to the following line:

var _happyBirthdayText = _interopRequireDefault(require("./images/happyBirthdayText.gif"));

The funny part is that it doesn't seem that the rendered parent component is even using that, so it makes things even weirder.

Any idea what can be the cause of that issue?

[SQReder]

bump this. same issue for importing font deep in libraries

SemiBold_ttf=require("@uikit/fonts/SemiBold.ttf")

[SQReder]

Fixed by change project to ESM mode

package.json

"type": "module"

[SQReder]

seems to be related #1910

[efratha94]

Did anyone find a solution for that already?

[ggdaltoso]

I'm also facing this issue and I solved it by downgrading Vitest to v0.33.0

For me, this issue started appearing on v0.34.0 ahead. As far as I could notice, there was a change in how we config the server, introduced by @fenghan34 and @sheremet-va but I couldn't find a way to fix it with the new property.

Update: I managed to fix this by updating a bunch of dependencies altogether ✌️