时间戳

首页 > 解决方案 > 在 vuetify 单元测试中让（模拟的）转换尽快在 v-menu 内完成

testing - 在 vuetify 单元测试中让（模拟的）转换尽快在 v-menu 内完成

问题描述

当激活器被触发时，v-menu 在内部使用一个过渡来显示给定的元素。我们只是想测试菜单元素是否在激活器点击后显示。

在我们的设置中，我们使用 Vue Test Utils 进行了组件测试，并执行以下操作：

const wrapper = createWrapper(...)
expect(wrapper.contains('.my-class')).toBe(false) // the Element is not there in the beginning

clickTheTriggerElement(wrapper) // trigger v-menu to show
await wrapper.vm.$nextTick()

expect(wrapper.find('.my-class').isVisible()).toBe(true) // fails

这失败了，因为 v-menu 使用的转换尚未完成。（它会在 setTimeout(...) 之后，但这是不太可接受的）。

Vue Test Utils 将此描述为一个常见问题，并提供了一个似乎适用于普通 vue.js 转换的解决方案。（他们使用一个模拟转换来立即渲染。）不幸的是，这似乎不适用于 vuetify 的内部转换。

你会怎么处理？

标签： testingvuetify.jsvue-test-utils

解决方案

我在 v-menu 中为 v-list 编写了单元测试，但我没有模拟转换。这是我的代码：

     //ACTION
        const button = wrapper.find('.theme-picker');
    
        await button.trigger('click');
    
        const topic = wrapper.find('.v-list-item');
    
        await topic.trigger('click');
    
        const result = wrapper.vm.$router;
    
        //ASSERT
        expect(result).toContainEqual(expected);

如果您有一些无法“达到”的异步行为，您可以使用：

    test('description', (done) => {
        wrapper.vm.$nextTick(() => {
          expect(result).toBe(expected);
          done();
        });
    });

它适用于 Jest 和 Mocha。测试将等到异步代码完成。也许它会帮助某人。

推荐阅读