How to configure storyshots with vue svg loader?
Shahynkamali opened this issue · 0 comments
Shahynkamali commented
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!