SVG component tests

[zhex900]

Hi,

I have a React component that uses a SVG as a component. It is referenced like this

import IconBook from '@/icons/book.svg';

...
return <div> <IconBook/> </div>

# next.config.js
module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });

    return config;
  },

When I run the test it gives this error

Error: Failed to fully serialize error: 'get name' called on an object that is not a valid instance of DOMException.
Inner error message: "/src/icons/book.svg" did not match the Name production

# vitest.config.ts
/// <reference types="vitest" />

import react from '@vitejs/plugin-react';
import path from 'path';
import { defineConfig } from 'vitest/config';

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './test/setupTest.ts',
    css: true,
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});

is there a way to mock the *.svg? Like jest

[sheremet-va]

You can use plugins:

{
  load(id) {
    if(id.endsWith(".svg"))
      return { code: "export default {}" }
  }
}

[zhex900]

I got this type error

Type '{ load(this: PluginContext, id: string): { code: string; } | undefined; }' is not assignable to type 'PluginOption'.
  Type '{ load(this: PluginContext, id: string): { code: string; } | undefined; }' is not assignable to type 'undefined'.

[zhex900]

I get the same error:

/// <reference types="vitest" />

import react from '@vitejs/plugin-react';
import path from 'path';
import { defineConfig } from 'vitest/config';

export default defineConfig({
  plugins: [
    react(),
    {
      load(id) {
        if (id.endsWith('.svg')) {
          console.log('id', id);
          return { code: 'export default {}' };
        }
      },
    },
  ],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './test/setupTest.ts',
    css: true,
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});

Error: Failed to fully serialize error: 'get name' called on an object that is not a valid instance of DOMException.
Inner error message: "/src/icons/pizza.svg" did not match the Name production

[zhex900]

if (id.endsWith('.svg')) had no match

[sheremet-va]

Sorry, I was answering from my phone before. To import svg files as react components, you can use something like vite-plugin-react-svg.

To just redirect it into other file, you can use test.alias.

To return your custom code, you can use plugins:

{
  name: 'load-svg',
  enforce: 'pre',
  // or transform(code, id) - I'm not sure here
  load(id) {
    if(id.endsWith(".svg"))
      // your custom code here
      return { code: "export default {}" }
  }
}

[zhex900]

Thank you!

This is what I used

  plugins: [
    react(),
    {
      name: 'load-svg',
      enforce: 'pre',
      transform(_, id) {
        if (id.endsWith('.svg')) {
          return 'export default () => {}';
        }
      },
    },
  ],