vue.js Stub NuxtLink in Storybook

djmepvbi 于 2023-10-23 发布在 Vue.js

关注(0)|答案(1)|浏览(138)

我目前有一个使用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" />'
  })
}

vue.js

来源：https://stackoverflow.com/questions/76472647/stub-nuxtlink-in-storybook

1条答案

按热度按时间

6l7fqoea1#

这就是如何通过将NuxtLink组件替换为常规锚标记来全局存根NuxtLink组件。单击时，链接不会被调用，但目标会记录到Storybook的“Actions”选项卡。

Storybook 7解决方案

添加到preview.ts：

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

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

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

赞(0）回复(0）举报 2023-10-23

我来回答

vue.js Stub NuxtLink in Storybook

1条答案

相关问题

热门标签

最新问答