Testing

Тестування Селекторів

Селектори — це теж чисті функції. Їх тестувати так само просто, як і редюсери.

Тестування Селекторів

Селектори — це теж чисті функції. Їх тестувати так само просто, як і редюсери.

Сценарій

У нас є список todos і фільтр.

features/todos/todosSlice.js

export const selectFilteredTodos = createSelector(
  [state => state.todos.items, state => state.todos.filter],
  (items, filter) => {
    if (filter === 'all') return items;
    if (filter === 'completed') return items.filter(t => t.completed);
    return items.filter(t => !t.completed);
  }
);

Тест

features/todos/todosSlice.test.js

import { selectFilteredTodos } from './todosSlice';

describe('todos selectors', () => {
  const mockState = {
    todos: {
      items: [
        { id: 1, text: 'A', completed: false },
        { id: 2, text: 'B', completed: true },
        { id: 3, text: 'C', completed: false },
      ],
      filter: 'all',
    },
  };

  it('should return all todos when filter is all', () => {
    const result = selectFilteredTodos(mockState);
    expect(result).toHaveLength(3);
  });

  it('should return completed todos', () => {
    // Модифікуємо стан для тесту
    const state = {
      ...mockState,
      todos: { ...mockState.todos, filter: 'completed' }
    };
    
    const result = selectFilteredTodos(state);
    expect(result).toHaveLength(1);
    expect(result[0].id).toBe(2);
  });
  
  it('should return active todos', () => {
    const state = {
      ...mockState,
      todos: { ...mockState.todos, filter: 'active' }
    };
    
    const result = selectFilteredTodos(state);
    expect(result).toHaveLength(2);
  });
});

Це дозволяє переконатися, що бізнес-логіка фільтрації працює правильно, ізольовано від React компонентів.

👉 Далі: Інтеграційне тестування компонентів

Edit this pageorReport an issue

Тестування Reducers

Тестування редюсерів — це найпростіша частина. Вам просто потрібно викликати функцію з певним станом і дією, і перевірити результат.

Тестування Компонентів (Integration)

Коли компонент використовує useSelector або useDispatch, ми не можемо просто відрендерити його в тесті. Він впаде з помилкою could not find react-redux context value.