Тестування Next.js за допомогою бібліотеки Testing Library та Jest: Мокування Zustand Store

3 Березня 2024 в 16:37 125

У процесі розробки веб-додатків неминуче виникає необхідність у тестуванні функціональності. Next.js разом із бібліотеками Testing Library та Jest надає потужний інструментарій для забезпечення надійності коду. Однак інколи виникає необхідність у мокуванні сторів для успішного тестування компонентів, особливо, якщо використовується Zustand для керування станом.

У даній статті ми розглянемо процес мокування Zustand Store у Next.js за допомогою бібліотеки Testing Library та Jest. Мокування дозволяє нам замінити реальний стор мокованим стором з фіксованими значеннями для ефективного тестування компонентів.

Для початку, давайте розглянемо структуру проекту Next.js, де ми будемо проводити тестування. У нашому прикладі, ми маємо компоненти, що використовують Zustand Store для керування станом. Один з цих компонентів – CustomTable, який ми будемо тестувати.

// Компонент CustomTable
import { componentStore } from '@/path/to/component-store';
const CustomTable = () => {
  const { ITEMS_PER_PAGE, currentNoOfItems, totalItem } = componentStore();
  // Рендер таблиці та логіка компонента
}
export default CustomTable;

// Компонент CustomTable

import { componentStore } from '@/path/to/component-store';

const CustomTable = () => {

const { ITEMS_PER_PAGE, currentNoOfItems, totalItem } = componentStore();

// Рендер таблиці та логіка компонента

}

export default CustomTable;

Тепер давайте перейдемо до створення тесту для компонента CustomTable з використанням бібліотеки Testing Library та Jest. При цьому ми будемо мокувати Zustand Store для уникнення помилок під час тестування.

// Тест для компонента CustomTable
import { render, screen } from '@testing-library/react';
import CustomTable from '@/components/UI/Table/Table';
import { componentStore } from '@/path/to/component-store';
// Мокування стору
jest.mock('@/path/to/component-store', () => ({
  componentStore: {
    ITEMS_PER_PAGE: 5,
    currentNoOfItems: 5,
    totalItem: 'nation', // Моковане значення для тесту
    showMoreItems: jest.fn(),
    setTotalItem: jest.fn(),
  },
}));
test('renders table headers correctly', () => {
  render(<CustomTable />);
  const text = screen.getByText("nation");
  expect(text).toBeInTheDocument();
});

// Тест для компонента CustomTable

import { render, screen } from '@testing-library/react';

import CustomTable from '@/components/UI/Table/Table';

import { componentStore } from '@/path/to/component-store';

// Мокування стору

jest.mock('@/path/to/component-store', () => ({

componentStore: {

ITEMS_PER_PAGE: 5,

currentNoOfItems: 5,

totalItem: 'nation', // Моковане значення для тесту

showMoreItems: jest.fn(),

setTotalItem: jest.fn(),

}));

test('renders table headers correctly', () => {

render(<CustomTable />);

const text = screen.getByText("nation");

expect(text).toBeInTheDocument();

});

В даному коді ми мокуємо Zustand Store, замінюючи його реальні значення мокованими значеннями. Таким чином, під час тестування компоненту CustomTable буде використовуватися мокований стор, що дозволить успішно протестувати компонент без помилок.