Transforming image in Vitest in Next.js codebase

[daelmaak]

Jest has a way to (not) process imported assets (.jpg, .png, ...) by setting what should be the resolved value. So it can resolve imported assets to eg. a mock object:

jest.config.js

module.exports = {
  transform: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/fileTransformer.js',
  },
};

As for Vite, I can't find an equivalent option to do that. The reason I need to do it is that in our Next.js codebase, we have some dynamic require('../path/to/image')s in our pages which Next.js resolves to an object which contains, among other things, src, width and other properties. But Vitest by default resolves such require differently, which in the test results into SyntaxError: Invalid or unexpected token (on the line of the require).

So is there a way to make Vite transform assets in particular way so that it conforms to Next's image resolution mechanism?

[danny-does-stuff]

@daelmaak did you find a solution to this? I’m running into the same issue

[daelmaak]

Not yet, but I haven't tried @mneveroff's solution so feel free to give it a try.

[mneveroff]

So I raised a similar issue on Discord and @sheremet-va was so kind to provide a solution that might be helpful in your case. I have modified it from .png to more mediaTypes.

const mediaTypes = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp', 'ico', 'bmp', 'avif', 'webp'];

defineConfig({
    plugins: [
      /**
       * A custom plugin to convert media files to data URLs for jsdom resources: usable
       */
      {
        name: 'media-to-data-url',
        enforce: 'pre',
        load(id) {
          for (const mediaType of mediaTypes) {
            if (id.endsWith(`.${mediaType}`)) {
              const src = readFileSync(id).toString('base64');
              return `export default "data:image/${mediaType};base64,${src}"`;
            }
          }
        },
      },
    ]
})

Specifically, this converts the assets to base64 which allowed me personally to get jsdom running with resource:usage. But more importantly, it shows how to add processors similar to Jest in Vite's pipeline.

[alihamza1221]

got this error

  The last overload gave the following error.
    Object literal may only specify known properties, and 'plugins' does not exist in type 'InlineConfig

ok I resolved it I had mistakenly placed plugin inside test obj leaving this comment for future devs