How to configure storyshots with vue svg loader?

[Shahynkamali]

Hello, I am using storybook 6.0.21 with Vue SVG Loader 0.16.0.
My storyshots testing keeps giving me a warning :

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

I am registering svg as a component in Vue and in the story it renders fine and there are no issues, but I keep getting this warning every time I run my tests. Does anybody have an idea on how to fix this?

Storyshots.test.js

import initStoryshots from '@storybook/addon-storyshots';

initStoryshots();

jest.config.js

module.exports = {
  preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
  transform: {
    '^.+\\.svg$': '<rootDir>/transformSVG.config.js',
    '^.+\\.tsx?$': 'ts-jest',
    '.*\\.(vue)$': '<rootDir>/node_modules/jest-vue-preprocessor',
    '^.+\\.mdx?$': '@storybook/addon-docs/jest-transform-mdx',
  },
  moduleFileExtensions: ['js', 'ts', 'vue', 'json'],
  transformIgnorePatterns: ['node_modules/(?!(@babel)/)', '/node_modules/(?!(@storybook/.*\\.vue$))'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
  testMatch: [
    '<rootDir>/src/**/*.(spec|test).(ts|js)',
  ],
};

transformsvg.config.js as per the documentation

const vueJest = require('vue-jest/lib/template-compiler');

module.exports = {
  process(content) {
    const { render } = vueJest({
      content,
      attrs: {
        functional: false,
      },
    });

    return `module.exports = { render: ${render} }`;
  },
};

thanks!