如何在VUE 3测试效果中测试过渡功能？

Question

我在带Jest和Vue测试UTLIS的Transiton功能方面遇到了问题。这是我的组件代码：

<div class="disclosure">
    <button
        class="label"
        type="button"
        @click="toggle"
    >
        <span class="label-text">
            <slot name="disclosure-title" />
        </span>
    </button>
    <Transition
        name="disclosure"
        @before-enter="transitionBaseState"
        @enter="transitionEndState"
        @before-leave="transitionEndState"
        @leave="transitionBaseState"
    >
        <div
            v-show="open"
            class="panel"
        >
            <div class="panel-content">
                <slot />
            </div>
        </div>
    </Transition>
</div>

我在过渡功能上有问题：过渡性和过渡设备。当我为组件运行EJST规格时，覆盖范围标签显示这些功能未涵盖。您知道测试这些功能的最佳方法是什么？我显示元素的测试是：

it('can be changed to opened by clicking the panel', async () => {
    await wrapper.find(buttonSelector).trigger('click');
    expect(wrapper.find(panelSelector).isVisible()).toBe(true);
});

函数：

function transitionBaseState(el: HTMLElement): void {
    el.style.height = '0';
}
function transitionEndState(el: HTMLElement): void {
    el.style.height = `${el.scrollHeight}px`;
}

Answer 1

好的。这是艰难的。 vue测试用 false 值在全球范围内模拟它。

import { config, mount } from '@vue/test-utils'
...

// before Mount
config.global.stubs = {
  transition: false
}
jest.useFakeTimers() // to deal with durations
// mount
// trigger click

jest.advanceTimersByTime(duration + 1)
// expect whatever you need from before-enter, enter, after-enter callbacks
// trigger click

jest.advanceTimersByTime(duration + 1)
// expect whatever you need from before-leave, leave, after-leave callbacks

如您所见，我添加了使用假计时器的解决方法来处理过渡持续时间。

实际上，在大多数情况下，您只是不需要测试过渡的作用。 Vue Core团队已经对此进行了测试，但是也许在某些情况下应该对其进行测试。如您所见，测试中的行数增加只是为了避免默认行为。它还使用无证件模型，您应该在每次更新VUE/VUE检验效果之后保持工作，并进行一些破坏性的更改。

无论如何，我已经在上面测试了此代码。这是我的尝试

it('should call all the callbacks', async () => {
    expect.hasAssertions()
    const callbacks = {
      onBeforeEnter: jest.fn(),
      onEnter: jest.fn(),
      onAfterEnter: jest.fn(),
      onBeforeLeave: jest.fn(),
      onLeave: jest.fn(),
      onAfterLeave: jest.fn(),
    }

    const component = defineComponent({
      name: 'Component',
      data() {
        return {
          flag: false
        }
      },
      template: `<div>
        <transition
          @before-enter="onBeforeEnter"
          @enter="onEnter"
          @after-enter="onAfterEnter"
          @before-leave="onBeforeLeave"
          @leave="onLeave"
          @after-leave="onAfterLeave">
          <span v-if="flag"></span>
        </transition>
      </div>`,
      methods: {
        onBeforeEnter: callbacks.onBeforeEnter,
        onEnter(e: Event, done: Function) {
          callbacks.onEnter()
          done()
        },
        onAfterEnter() {
          callbacks.onAfterEnter()
        },
        onBeforeLeave() {
          callbacks.onBeforeLeave()
        },
        onLeave(e: Event, done: Function) {
          callbacks.onLeave();
          done()
        },
        onAfterLeave() {
          callbacks.onAfterLeave()
        }
      }
    })

    config.global.stubs = {
      transition: false
    }

    jest.useFakeTimers()
    const wrapper = mount(component)

    await wrapper.setData({ flag: true })

    expect(callbacks.onBeforeEnter).toHaveBeenCalled()
    expect(callbacks.onEnter).toHaveBeenCalled()
    expect(callbacks.onAfterEnter).toHaveBeenCalled()

    await wrapper.setData({ flag: false })

    jest.advanceTimersByTime(1)

    expect(callbacks.onBeforeLeave).toHaveBeenCalled()
    expect(callbacks.onLeave).toHaveBeenCalled()
    expect(callbacks.onAfterLeave).toHaveBeenCalled()
  })

Answer 2

这是我的解决方案：

const FakeTranstion = defineComponent({
  emits: ['afterEnter'],
  template: '<div><slot /></div>',
  setup(_, { emit }) {
    return {
      emitAfterEnter() {
        emit('afterEnter')
      },
    }
  },
})

const subject = mount(YourComponent, {
  propsData: {
    modelValue,
  },
  global: {
    stubs: {
      transition: FakeTranstion,
    },
  },
 })

 subject.findComponent(FakeTranstion).vm.emitAfterEnter()