Блог

Главная - Вопросы по программированию - Тестирование внутренней логики метода с использованием vue-test-utils с Jest

Тестирование внутренней логики метода с использованием vue-test-utils с Jest

#javascript #unit-testing #vue.js #frontend #vue-test-utils

#javascript #модульное тестирование #vue.js #интерфейс #vue-test-utils

Вопрос:

Как я могу протестировать внутреннюю логику следующего метода?

Например:

 async method () {
  this.isLoading = true;
  await this.GET_OFFERS();
  this.isLoading = false;

  this.router.push("/somewhere");
}

Итак, у меня есть метод, который переключает isLoading , вызывает действие и куда-то направляет. Как я могу быть уверен, что isLoading было правильно переключено (true перед вызовом действия и false после)?

Ответ №1:

Вы должны извлечь строки this.isLoading в новый метод setLoading() и проверить, был ли он вызван.

Комментарии:

1. Действительно ли это только один способ? Шаблон Jest (или тестирования в целом) заключается в блокировке кода?

2. Я не уверен, что вы имеете в виду, но вы не можете проанализировать способ выполнения тестируемой функции. Только путем проверки, делает ли это что-то, вызывая другие функции. На самом деле, если вы хотите, чтобы ваша функция хорошо подходила для целей тестирования, вам нужно отделить данные, используемые внутри функции, от внешних данных. Так что это могло бы быть более чистым. Не могли бы вы создать тестовую среду для своего случая в code sandbox и дать нам ссылку?

Ответ №2:

Второй аргумент shallowMount / mount — это параметры монтирования, которые могут быть использованы для переопределения реквизитов данных компонента при монтировании. Это позволяет вам передать установщик, который издевается над isLoading реквизитом данных, который затем позволяет вам проверить, что свойство было изменено в тестируемом методе:

 it('sets isLoading', () => {
  const isLoadingSetter = jest.fn()

  const wrapper = shallowMount(MyComponent, {
    data() {
      return {
        // This setter is called for `this.isLoading = value` in the component.
        set isLoading(value) {
          isLoadingSetter(value)
        }
      }
    }
  })


  //...
})

Затем вы могли бы использовать toHaveBeenCalledTimes() наряду с isLoadingSetter.mock.calls[] для проверки аргументов каждого вызова mocked setter. И поскольку вы хотите протестировать эффекты async метода, вам придется await вызвать метод, прежде чем делать какие-либо утверждения:

 it('sets isLoading', async () => {
  //...

  await wrapper.vm.method()

  expect(isLoadingSetter).toHaveBeenCalledTimes(2)
  expect(isLoadingSetter.mock.calls.[0][0]).toBe(true)
  expect(isLoadingSetter.mock.calls.[1][0]).toBe(false)
})

Если вы также хотите проверить, что GET_OFFERS() вызывается, вы могли бы использовать jest.spyOn() метод компонента перед монтированием:

 it('gets offers', async () => {
  const getOfferSpy = jest.spyOn(MyComponent.methods, 'GET_OFFERS')
  const wrapper = shallowMount(MyComponent, /*...*/)
  await wrapper.vm.method()
  expect(getOfferSpy).toHaveBeenCalledTimes(1)
})