Как протестировать мутации?

Тестирование мутаций является важным аспектом работы с Vuex, состоянием хранилища во Vue-приложениях. Мутации — это функции, которые изменяют состояние хранилища, и важно убедиться, что они работают корректно.

Зачем тестировать мутации?

Основы тестирования мутаций в Vuex

Прежде чем начать, убедитесь, что у вас установлен Vuex. Мы будем использовать Jest как тестовый фреймворк для наших тестов.

Пример мутации

Давайте создадим простую мутацию, которая будет управлять списком задач.

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    tasks: []
  },
  mutations: {
    addTask(state, task) {
      state.tasks.push(task);
    },
    removeTask(state, taskId) {
      state.tasks = state.tasks.filter(task => task.id !== taskId);
    }
  }
});

Написание тестов для мутаций

Создадим файл тестов, например store.spec.js, где протестируем наши мутации.

// store.spec.js
import store from './store';

describe('Мутации Vuex', () => {
  it('должен добавлять задачу', () => {
    const task = { id: 1, title: 'Новая задача' };
    store.commit('addTask', task);
    
    expect(store.state.tasks).toEqual([task]);
  });

  it('должен удалять задачу', () => {
    const task1 = { id: 1, title: 'Первая задача' };
    const task2 = { id: 2, title: 'Вторая задача' };
    
    store.commit('addTask', task1);
    store.commit('addTask', task2);
    
    store.commit('removeTask', 1);
    
    expect(store.state.tasks).toEqual([task2]);
  });
});

Запуск тестов

Теперь, когда у нас есть тесты, мы можем запустить их с помощью командной строки:

npm run test

Заключение

Тестирование мутаций в Vuex не только улучшает надежность вашего приложения, но и способствует лучшему пониманию кода. Следуя приведенным выше примерам, вы сможете протестировать свои собственные мутации и удостовериться, что они работают как задумано.