Событие триггера в Jest Test не вызывает метод

В настоящее время я пишу тесты для своего приложения Vue. У меня есть кнопка, которая вызывает функцию выхода. Я просто хочу проверить, вызывается ли функция при нажатии кнопки.

Я пытался издеваться над функцией с помощью jest.fn (), но не могу заставить ее работать. Я также попытался запустить метод и поместить в него console.log, но этот журнал не был вызван. Что я делаю неправильно?

это моя настройка оболочки:

let wrapper;

beforeEach(() => {
    Vue.use(Vuetify);
    Vue.prototype.$router = new VueRouter();
    wrapper = shallowMount(Navigation);
});

afterEach(() => {
    wrapper.destroy();
});


it('should call logout function on button click', function() {
        let submitLogoutMock = jest.fn();
        wrapper.vm.submitLogout = submitLogoutMock;

        wrapper
            .find('#logout-button')
            .trigger('click');

        expect(submitLogoutMock).toHaveBeenCalled();
    });

Я ожидаю, что будет вызван фиктивный метод, но на самом деле я получаю сообщение об ошибке:

Error: expect(jest.fn()).toHaveBeenCalled()

Expected mock function to have been called, but it was not called.

javascript jestjs vue.js triggers vue-test-utils
person baxter3000    schedule 14.10.2019    source источник
comment
Проверьте, прослушивает ли ваш компонент пользовательское click событие или собственное, потому что сейчас похоже, что вы запускаете собственное событие click.   -  person Husam Ibrahim    schedule 14.10.2019
comment
<v-btn icon id="logout-button" @click.native="logout"> Я снова попытался исследовать и добавил .native, и теперь мой тест работает ... не могли бы вы объяснить, почему я действительно не понимаю разницы между обычным и обычным щелчком   -  person baxter3000    schedule 14.10.2019
comment
Модификатор .native прослушивает собственные события DOM, такие как событие click, генерируемое элементом button. По умолчанию при использовании сокращений v-on или the@ vue прослушивает пользовательские события , запускаемые с помощью $emit.   -  person Husam Ibrahim    schedule 14.10.2019

Ответы (1)


arrow_upward
2
arrow_downward

При использовании shallowMount методы компонента должны быть заглушены. Вы можете добиться этого при создании оболочки или с помощью setMethods().

Вам нужно только изменить свой модульный тест:

  it('should call logout function on button click', () => {
    const submitLogoutMock = jest.fn();
    wrapper.setMethods({ submitLogout: submitLogoutMock });

    wrapper.find('#logout-button').trigger('click');

    expect(submitLogoutMock).toHaveBeenCalled();
  });
person Simon Thiel    schedule 16.10.2019