Vue, Jest. Падает тест вызова метода при клике

133
19 мая 2019, 16:40

Начал изучать тему unit тестирования Vue компонентов. Использую Jest.

Появился затык с одни тестом, никак не могу понять в чем дело.

Хочу протестировать вызов функции в компоненте, при клике на определенный элемент.

<template> 
  <li  
  class="message"  
  style="margin-top: 10px" 
  @click="handleClick" 
  > 
    {{ message }} 
  </li> 
</template>

При прямом вызове функции тест срабатывает, но при клике - падает, так как функция почему то не вызывается. При этом во время реального клика - все ок.

import { mount } from "@vue/test-utils"; 
import Message from "@/components/Message.vue"; 
 
describe("Message.test.js", () => { 
    let wrapper; 
    const createWrapper = propsData => mount(Message, { propsData }); 
     
    describe("Events", () => { 
        beforeEach(() => { 
            wrapper = createWrapper({ message: "Cat" }); 
        }); 
//Работает -функция вызывается напрямую 
    it("calls handleClick", () => { 
            const spy = jest.spyOn(wrapper.vm, 'handleClick'); 
            wrapper.vm.handleClick(); 
            expect(spy).toHaveBeenCalled(); 
        }); 
        //Падает 
         it("calls handleClick when click on message", () => { 
            const spy = jest.spyOn(wrapper.vm, 'handleClick'); 
            expect(wrapper.contains('.message')).toBe(true); 
 
            wrapper.find('.message').trigger('click'); 
            expect(spy).toHaveBeenCalledTimes(1); 
        }) 
   }); 
});

Добавил вывод в консоль при вызове метода - вижу, что во время тестирования с кликом, метод вызывается. Не могу понять, почему тест падает

Answer 1

Теперь работает:

  
 it('calls handleClick when click on message', () => { 
            const handleClick = jest.fn() 
            wrapper.setMethods({ handleClick }) 
            const el = wrapper.find('.message').trigger('click') 
            expect(handleClick).toBeCalled() 
        }) 
//Используем stub 
        it('triggers a message-clicked event when a handleClick method is called', () => { 
            const stub = jest.fn() 
            wrapper.vm.$on('message-clicked', stub) 
            wrapper.vm.handleClick() 
            expect(stub).toBeCalledWith('Cat') 
        })

READ ALSO
Angular - для MPA -

Angular - для MPA -

Хочу использовать Angular для проектаОднако это не SPA, а MPA Т

155
Как верно организовать удаление тега из поля поиска

Как верно организовать удаление тега из поля поиска

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

175
JavaScript: как найти объект в памяти по значению ключа

JavaScript: как найти объект в памяти по значению ключа

Можно ли найти объект в памяти, если я его никуда (например в массив) не сохраняюКод:

217