Изолированное тестирование геттеров несложно, поскольку в основном это просто функции JavaScript. Мы хотим протестировать геттеры изолированно как единое целое, то есть без создания хранилища Vuex или рендеринга компонента. Для получения информации о том, как тестировать геттеры в контексте компонента с реальным хранилищем Vuex, см. Здесь.

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

Мы протестируем следующие геттеры:

  1. poodles: получает все poodles
  2. poodlesByAge: получает всех пуделей и принимает аргумент возраста

Создание геттеров

Во-первых, давайте создадим геттеры.

Ничего особенного - помните, что геттеры получают другие гетты в качестве второго аргумента. Поскольку у нас уже есть poodles геттер, мы можем использовать его в poodlesByAge. Возвращая функцию в poodlesByAge, которая принимает аргумент, мы можем передавать аргументы геттерам. Геттер poodlesByAge можно использовать так:

Начнем с теста на poodles.

Написание тестов

Поскольку метод получения - это просто функция JavaScript, которая принимает объект state в качестве первого аргумента, проверка очень проста. Я напишу свой тест в getters.spec.js файле со следующим кодом:

Vuex автоматически передает state геттеру. Поскольку мы тестируем геттеры изолированно, без Vuex для передачи состояния за нас, мы должны вручную передать state. В остальном мы просто тестируем обычную функцию JavaScript.

poodlesByAge немного интереснее. Второй аргумент геттера - другой getters. Мы тестируем poodlesByAge, поэтому мы не хотим задействовать реализацию poodles. Вместо этого мы можем заглушить getters.poodles. Это даст нам более точный контроль над тестом.

Вместо того, чтобы передавать реальный poodles геттер, мы передаем результат, который он должен вернуть. Мы уже знаем, что он работает, так как написали для него тест. Это позволяет нам сосредоточиться на тестировании логики, уникальной для poodlesByAge.

Возможно наличие async геттеров. Их можно протестировать по той же методике, что и async действие, о которых вы можете прочитать здесь.

Заключение

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

Исходный код теста, описанного на этой странице, можно найти здесь.

Первоначально опубликовано в Руководстве по тестированию Vue.