Question

我正在将故事书6.0.21与Vue SVG Loader 0.16.0一起使用。我的Storyshots测试不断给我一个警告：

[Vue警告]：未知的自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

我正在将svg注册为Vue中的组件，并且在故事中它可以正常显示，没有任何问题，但是每次运行测试时，我都会不断收到此警告。有人对如何解决这个问题有想法吗？

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)',
  ],
};

根据{{3}}的

transformsvg.config.js

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

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

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

谢谢！

如何使用vue-svg-loader配置故事书的故事情节？

0 个答案: