Проверка Vue, если действие вызывает другое действие с spyOn - PullRequest
Новая
       71

Проверка Vue, если действие вызывает другое действие с spyOn

0 голосов
/ 07 декабря 2018

В Vue я хочу проверить, правильно ли действие в моем магазине вызывает другое действие, используя Jest's spyOn, я пробовал это по-разному, но, похоже, это не работает, вот мой код:

// index.js 

getRecipes ({ dispatch }) {
  const fruits = ['apple', 'banana', 'pear']
  fruits.forEach((fruit) => {
    dispatch('getRecipe', fruit)
  })
},
async getRecipe ({ commit }) {
  const recipe = await recipesService.fetchRecipe(payload)

  commit(SET_RECIPE, { recipe })
},

// index.spec.js 

test('getRecipes calls getRecipe 3 times, each with the right fruit', () => {
  const commit = jest.fn()
  const dispatch = jest.fn()
  const spy = spyOn(actions, 'getRecipe')
  const result = actions.getRecipes({ commit, dispatch })

  expect(spy).toHaveBeenCalledTimes(3)
  expect(spy).toHaveBeenCalledWith('apple')
})

Но когда я запускаю тесты,это вывод, который я получаю: 

Expected spy to have been called three times, but it was called zero times.

У меня есть другие места, где я хочу протестировать такого рода интеграцию (действие, вызывающее другое), но это все равно дает мне эту ошибку.

Ответы [ 2 ]

0 голосов
/ 07 декабря 2018

при попытке протестировать функцию async необходимо использовать await

const getAsyncWithSpyOn = spyOn(actions, 'getRecipe');
expect(await getAsyncWithSpyOn()).toHaveBeenCalledTimes(3)
0 голосов
/ 07 декабря 2018

Тестируйте только свой код, а не vuex

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

Вместо шпионанепосредственно на actions и утверждая, что vuex правильно вызывает действие getRecipe при вызове dispatch('getRecipe', fruit), я бы проверил, что действие getRecipes правильно вызывает dispatch: 

test('getRecipes dispatches 3 "getRecipe" actions, each with the right fruit', () => {
  const commit = jest.fn()
  const dispatch = jest.fn()
  const result = actions.getRecipes({ commit, dispatch })

  expect(dispatch).toHaveBeenCalledTimes(3)
  expect(dispatch.mock.calls[0][0]).toBe('apple')
  expect(dispatch.mock.calls[1][0]).toBe('banana')
  expect(dispatch.mock.calls[2][0]).toBe('pear')
})

Что, если вы все еще хотите протестировать интеграцию vuex

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

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

new Vue({store})

Итак, вваши тесты, модуль actions действительно ничего не знает о самом vuex (здесь я догадываюсь, на самом деле не могу сказать по вашему опубликованному коду, но это вероятно).

Вот почему ваши тесты не знаютУНРk, как и ожидалось, потому что в тесте метод getRecipes просто получает параметр dispatch и вызывает его, но vuex на самом деле ничего не делает, поэтому нет никакого способа, чтобы вызов dispatch вызвал другое действие.

Теперь, если вы все еще хотите проверить это с помощью jest, вы должны сделать это из компонента, поэтому вы тестируете действия в контексте vue и vuex.

Есть хороший учебникоб этом в документации утилиты vue test .

...