Vue Тестирование (JEST): button.trigger ('click') не работает - PullRequest
Новая
       70

Vue Тестирование (JEST): button.trigger ('click') не работает

0 голосов
/ 10 июля 2020

Читал много обсуждений stackoverflow и github, о vue jest возникли проблемы с button.trigger ('click'). Сегодня я боролся с этой проблемой несколько часов, должен сказать, что я очень разочарован и удивлен, как простая функция, такая как триггер ('щелчок'), может вызвать столько проблем.

In Короче говоря, в моем коде есть b-кнопка, которая @click запускает функцию fetchData из vuex. Это отлично работает в браузере, но в режиме тестирования fetchData не выполняется.

Vue Код компонента 

<template>
  <b-button id="loadButton" variant="outline-primary" @click="fetchData">Load Data</b-button>
</template>

<script>
import { mapActions } from 'vuex';
export default {
    name: "LoadAndSave",
    methods: { ...mapActions(['fetchData']) }
}
</script>

Код тестирования 

import { shallowMount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
import { BootstrapVue } from 'bootstrap-vue'
import LoadAndSave from '../../resources/components/LoadAndSave'

const localVue = createLocalVue()
localVue.use(BootstrapVue)
localVue.use(Vuex)

describe('LoadAndSave.vue', () => {
  let actions
  let getters
  let store

  beforeEach(() => {
    actions = {
      fetchData: jest.fn()
    }
    store = new Vuex.Store({
      actions
    })
  })
  it('LoadAndSave: onClick executes fetchData', async () => {
    const wrapper = shallowMount(LoadAndSave, { localVue, store })
    const button = wrapper.find("#loadButton")
    await button.trigger('click')
    expect(actions.fetchData).toHaveBeenCalled()
  })
})

Результат тестирования 

expect(jest.fn()).toHaveBeenCalled()

Expected number of calls: >= 1
Received number of calls:    0

Это не мой первый день кодирования, я тоже не где-то рядом с экспертом в кодировании, но сама идея того, что не могу нажать кнопку для запуска, действительно вызывает мурашки по коже мой позвоночник, не говоря уже о сопутствующем разочаровании.

Если кто-нибудь может дать какое-либо предложение, которое будет оценено, спасибо.

Кодей

1 Ответ

0 голосов
/ 05 августа 2020

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

<button class="btn btn-success" id="saveButton" @click="save">Save</button>

но не здесь: 

<button class="btn btn-success" id="saveButton" @click="save()">Spara</button>

Вы можете по крайней мере проверить, является ли это вашей проблемой, сделать ссылку на функцию хранения в методах и вызвать функцию с круглыми скобками на элементе .

Другой способ подтвердить, что нажатие кнопки сработало, - это посмотреть на выпущенный объект. 

it('Calls save() when pressing save button', () => {
  const savebutton = wrapper.find('#saveButton')
  savebutton.trigger('click')
  expect(wrapper.emitted('save')).toHaveLength(1)
})
...