VUE测试utils，在父上下文中测试示波器的插槽逻辑

发布于 2025-01-20 16:36:36 字数 1581 浏览 1 评论 0原文

我有一个“父”组件，其唯一重点是实现一个自定义表组件，称为＆lt; vtable＆gt;

我想测试特定于父的逻辑，因为它在各种范围的上下文中使用子桌上的老虎机。

这些插槽是根据标题中提供的属性动态声明的。
给定：

const headers = [
{ trackBy: 'lastName', sortable: true, width: '85px' },
{ trackBy: 'status', sortable: true, width: '95px' }
]

实现中阐明以下插槽

<template>
  <div class="Foo">
    <div class="Foo-table">
      <VTable
        :headers="headers"
        :rows="rows"
        :sort="Sort"
        :numeration="getNumeration"
        :loading="isLoading"
        striped
        numerated
        @sort="onSort"
      >
        <template v-slot:row.lastName="{ row, index }">
          ... Custom Implementation ...
        </template>

        <template v-slot:row.status="{ row, index }">
          ... Custom Implementation ...
        </template>
      ...

然后，将在我对每个范围内插槽内的特定逻辑感兴趣的

。我可以

const wrapper = shallowMount(
          index,
          {
            localVue,
            mocks,
            store: new Vuex.Store(store),
            stubs: {
              'VTable': VTable
            }
          })

通过以下方式求助于原始输出，

const table = wrapper.findComponent({ name: 'VTable' })

table.vnode.elm.innerHTML

但是任何尝试使用find/findcomponent/etc的尝试。是否从包装器或表不成功。有办法这样做吗？我想匹配的RAW HTML是不建议使用的。

原文

I have a "parent" component whose sole focus is to implement a custom table component called <VTable>

I would like to test the logic specific to the parent as it is used in the context of various scoped slots on the child table.

the slots are dynamically declared based on properties supplied in the header.
Given:

const headers = [
{ trackBy: 'lastName', sortable: true, width: '85px' },
{ trackBy: 'status', sortable: true, width: '95px' }
]

then the following slots will be explosed in an implementation

<template>
  <div class="Foo">
    <div class="Foo-table">
      <VTable
        :headers="headers"
        :rows="rows"
        :sort="Sort"
        :numeration="getNumeration"
        :loading="isLoading"
        striped
        numerated
        @sort="onSort"
      >
        <template v-slot:row.lastName="{ row, index }">
          ... Custom Implementation ...
        </template>

        <template v-slot:row.status="{ row, index }">
          ... Custom Implementation ...
        </template>
      ...

I am interested in the specific logic within each of the scoped slots.

I can resort to

const wrapper = shallowMount(
          index,
          {
            localVue,
            mocks,
            store: new Vuex.Store(store),
            stubs: {
              'VTable': VTable
            }
          })

and find the raw output via:

const table = wrapper.findComponent({ name: 'VTable' })

table.vnode.elm.innerHTML

but any attempts to use find/findComponent/etc. whether called from wrapper or table are unsuccessful. Is there a way to do this? I imagine matching raw html is discouraged.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一指流沙 2025-01-27 16:36:36

在我实例中，解决方案是将所有其他组件都放置在vtable组件上均与示波器插槽。

const wrapper = mount(
          index,
          {
            localVue,
            mocks,
            store: new Vuex.Store(store),
            stubs: {
              FooComponent: { template: '<div class="FooComponent"></div>' },
              BarComponent: true,
              ...
            }
          })

如果未固执的组件较少通用，则此方法带有警告，该方法可能会变得脆弱（这本身可能表明所讨论的组件需要重构）

The solution in my instance was to stub every other component bar the VTable component with the scoped slots.

const wrapper = mount(
          index,
          {
            localVue,
            mocks,
            store: new Vuex.Store(store),
            stubs: {
              FooComponent: { template: '<div class="FooComponent"></div>' },
              BarComponent: true,
              ...
            }
          })

This approach carries the caveat that tests could become brittle if the component that wasn't stubbed is less generic (that in itself might be an indicator that the component in question requires refactoring)

回复收藏 0 原文

~没有更多了~