Тестування завантаження та обробки xlsx файлів у React за допомогою react-testing-library та vitest

7 Березня 2024 в 22:55 22

У сучасних веб-додатках часто виникає необхідність завантажувати та обробляти файли користувачами. Одним із найпоширеніших форматів файлів є xlsx, який використовується для електронних таблиць у програмах, таких як Microsoft Excel. У цій статті ми розглянемо, як можна протестувати процес завантаження та обробки xlsx файлів у React за допомогою бібліотек react-testing-library та vitest.

Проблема

Розглянемо сценарій, де ми маємо React компонент, який дозволяє користувачеві завантажити xlsx файл. Після завантаження файлу його необхідно обробити та відобразити дані у вигляді таблиці. Очевидно, що для ефективного тестування цього процесу нам потрібно перевірити кілька аспектів:

Чи працює коректно процес завантаження файлу?
Чи правильно обробляються дані з xlsx файлу?
Чи відображаються дані у вигляді таблиці на веб-сторінці?

Рішення

Для тестування процесу завантаження та обробки xlsx файлів у React ми скористаємося бібліотеками react-testing-library та vitest. Почнемо з написання тесту, що перевіряє, чи працює процес завантаження файлу. Для цього ми використаємо функціонал бібліотеки react-testing-library для взаємодії з компонентом та емуляції подій користувача.

describe("MyImportFile", () => {
  test("does the upload work?", async () => {
    const user = userEvent.setup();
    render(<MyImportFile />);
    const input = screen.getByLabelText(/Import XLSX/i);
    const xlsxFilePath = "people_10_min.xlsx";
    const blob = await openAsBlob(xlsxFilePath, {
      type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
    });
    await act(async () => {
      await user.upload(input, blob);
    });
    // Додаткові перевірки тут
  });
});

describe("MyImportFile", () => {

test("does the upload work?", async () => {

const user = userEvent.setup();

render(<MyImportFile />);

const input = screen.getByLabelText(/Import XLSX/i);

const xlsxFilePath = "people_10_min.xlsx";

const blob = await openAsBlob(xlsxFilePath, {

type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",

});

await act(async () => {

await user.upload(input, blob);

});

// Додаткові перевірки тут

});

У цьому тесті ми спершу створюємо фіктивного користувача за допомогою функції userEvent.setup(). Після цього ми рендеримо компонент MyImportFile та отримуємо доступ до елементу вводу для завантаження файлу за допомогою функції screen.getByLabelText(). Далі ми створюємо Blob об’єкт, який представляє xlsx файл, та емулюємо подію завантаження файлу користувачем. У кінці тесту ми можемо додати додаткові перевірки, щоб впевнитися, що процес завантаження пройшов успішно.

Наступним кроком буде написання тесту для перевірки обробки даних з xlsx файлу. Для цього ми скористаємося можливостями бібліотеки react-testing-library для перевірки відображення даних у вигляді таблиці після завантаження файлу. Додамо цей тест до нашого сценарію:

describe("MyImportFile", () => {
  test("does the upload work?", async () => {
    // Код тестування завантаження файлу
  });
  test("does the data get parsed?", async () => {
    // Код тестування обробки даних
  });
});

describe("MyImportFile", () => {

test("does the upload work?", async () => {

// Код тестування завантаження файлу

});

test("does the data get parsed?", async () => {

// Код тестування обробки даних

});

У тесті для перевірки обробки даних з xlsx файлу ми також рендеримо компонент MyImportFile та емулюємо подію завантаження файлу. Після цього ми можемо скористатися функціями бібліотеки react-testing-library для перевірки того, що дані коректно відображаються у таблиці на сторінці.

Висновок

Тестування завантаження та обробки xlsx файлів у React може бути важливою частиною розробки веб-додатків, особливо якщо ваш додаток активно використовує цей формат файлів. З використанням бібліотек react-testing-library та vitest ви можете ефективно перевірити коректність цих процесів у вашому додатку, що допоможе забезпечити його стабільність та надійність.