Vue. js тестирование с шуткой, сбой привязки класса - PullRequest
Новая
       5

Vue. js тестирование с шуткой, сбой привязки класса

0 голосов
/ 05 мая 2020

Я пытаюсь протестировать компонент, который должен быть скрыт при нажатии пользователем. Функциональность работает в браузере, но тесты не проходят при автоматическом тестировании с помощью Jest.

Вот тест: 

 it(`If the local variable is set to be clicked, 
     then the tip is hidden`, () => {
    const wrapper = mount(Component, { props });
    wrapper.setData({ was_clicked: true });
    wrapper.vm.$forceUpdate();
    expect(wrapper.classes()).toContain("hide"); // fails here
    expect(wrapper.find(".toast").isVisible()).toBe(false);
});

Вот компонент: 

<template>
    <div @click="hide" class="toast" :class="{ hide: was_clicked }">
        ...
    </div>
</template>
<script>
export default {
    name: ...,
    data() {
        return {
            was_clicked: false,
        };
    },
    props: {
        ...
    },
    methods: {
        hide(event) {
            this.was_clicked = true;
        },
    },
};
</script>

Я пытался добавить и удалить wrapper.vm.$forceUpdate(); из теста, также я тестировал nextTick из wrapper.vm

1 Ответ

0 голосов
/ 05 мая 2020

wrapper.vm.$forceUpdate(); возвращает обещание. Вы должны либо await это обещание (и пометить функцию как async), либо переместить expect() после него в .then. То же самое касается vm.$nextTick();. Вот код, который работал со мной: 

it(`If the local variable is set to be clicked, then the tip is hidden`, async () => {
    const wrapper = mount(Tip, { props });
    wrapper.setData({ was_clicked: true });
    await wrapper.vm.$nextTick();
    expect(wrapper.classes()).toContain("hide");
    expect(wrapper.isVisible()).toBe(false);
});
...