故事书中的存根 NuxtLink

Question

我目前有一个使用

NuxtLink

的组件。当我尝试在 Storybook 中渲染它时，它指出找不到

NuxtLink

组件。我正在尝试存根该组件，以便故事能够正确呈现。这似乎仍然给出相同的错误。

存根

NuxtLink

组件的正确方法是什么？

import type { Meta, StoryObj } from '@storybook/vue3'
import { Header } from './../src/components'
import { RouterLinkStub } from '@vue/test-utils'

const meta: Meta<typeof HeaderMobile> = {
  title: 'Header',
  component: Header,
  render: (args: any) => ({
    components: {
      Header,
      NuxtLink: RouterLinkStub
    },
    setup() {
      return { args }
    },
    template: '<Header v-bind="args" />'
  })
}

Answer 1

这就是如何通过将

NuxtLink

组件替换为常规锚标记来全局存根它：

故事书7的解决方案

添加到

preview.ts

：

import { setup } from "@storybook/vue3";
import { action } from "@storybook/addon-actions";

setup((app) => {
  app.component("NuxtLink", {
    props: ["to"],
    methods: {
      log() {
        action("link target")(this.to);
      },
    },
    template: '<a @click="log"><slot></slot></a>',
  });
});

故事书6的解决方案

添加到

preview.js

：

import { app } from "@storybook/vue3";
import { action } from "@storybook/addon-actions";

app.component("NuxtLink", {
  props: ["to"],
  methods: {
    log() {
      action("link target")(this.to);
    },
  },
  template: '<a @click="log"><slot></slot></a>',
});