Кращі практики тестування компонентів реагування

автор React Developers @ Selleo

Найпопулярніший підхід до тестування компонентів React - це використання Mocha + Chai + Enzyme або Jest + Enzyme. У цій статті ми опишемо нашу практику тестування компонентів React за допомогою Jest + Enzyme, які також застосовні до Mocha + Chai.

Якщо ви новачок у тестуванні компонентів React, слід також прочитати:

  • створити-реагувати-додаток README в розділі "Написання тестів"
  • Jest - Початок роботи
  • Документація для ферментів API

Організація тестів

У більш великих проектах JavaScript ми ставимо тести, близькі до впровадження у підпапці __tests__. Зазвичай тести для компонента групуються за структурою та поведінкою додаються поверх нього, наприклад:

Тест на мінімальних компонентах підтверджує наданий компонент

Мінімальні випробування компонентів підтверджують, що компонент виконує належним чином тестування диму або "Тестування перевірки побудови". Це можна зробити за допомогою ферменту:

або Jest знімок:

Пізніше створюється __snapshots __ / MainSection.spec.js.snap файл.

Зміни знімків підтверджуються локально за допомогою "u" в vic cli і передаються в сховище git, тому рецензент PR може їх побачити. Детальніше ви можете прочитати на тестуванні знімків

На даний момент ми обмежуємо використання знімків перетворенням компонентів та складних json (тобто конфігурацій діаграм).

Гаразд, я тестую рендери - що ще я повинен перевірити?

Ви повинні мати на увазі, що тести - це те, що ви повинні писати та підтримувати. Написання хороших тестів вимагає стільки ж майстерності, скільки створення коду програми.

Тести - це автоматизоване забезпечення якості та документація для розробників. Чим більший проект і команда, тим більш детальними будуть тести.

Постарайтеся думати про майбутнє, коли ви повернетесь до цього компонента чи рефакторинг - який би ви очікували від тестів?

  • Ізольовано - всі взаємодії із зовнішніми службами повинні бути висмійовані
  • Конкретні - якщо змінити невелику функціональність, ви хочете отримати конкретне повідомлення про помилку тесту
  • Вони описують, що система не робить, щоб можна було легко переробляти

Переглянемо деякі практики, які ми вважаємо корисними для досягнення цих цілей.

Явне налаштування () замість beforeEach ()

Перевага використання явної функції setup () полягає в тому, що в будь-якому тесті зрозуміло, як компонент був ініціалізований. Об'єкт налаштування також є хорошим місцем для підключення деяких допоміжних функцій, які взаємодіють із обгорткою, тобто.

Тестування поведінки

Тестування поведінки на практиці зводиться до тестування, якщо певні входи та імітовані події призводять до очікуваних результатів, тобто

Ви можете бачити, як setup () робить написання цих тестів справді швидким!

Використовуйте допоміжні функції

Іноді доводиться писати багато подібних тестів із зміною лише однієї вхідної змінної. Це можна вирішити за допомогою допоміжної функції, яка генерує тест:

Він читає набагато тісто і простіший в обслуговуванні.

Підсумок

Практики, описані в цій статті:

  • розмістити тести, близькі до реалізації у підпапці __tests__
  • завжди починати з простого тестування візуалізації компонентів, а також тестування диму, а потім тестування
  • подумайте про майбутнє, коли ви повернетесь до цього компонента або переробите його
  • використовувати явний setup () і повертати загальні змінні скорочення
  • використовувати допоміжні функції, які генерують тести

Ми сподіваємось, що Ви знайшли цю статтю корисною. Ви можете знайти приклад робочого коду в моєму вилку коду redux todomvc на веб-сайті https://github.com/tb/redux/tree/react-testing/examples/todomvc/src/components/__tests__