Якщо ви хочете знати, як випробувати реагування, ви знаходитесь у правильному місці. Ви дійсно знаєте, що ваш код робить те, що він повинен робити? Ви перевірили його в браузері? Що робити, якщо у вас немає, або ви не можете перевірити все, і він розбивається у виробництві?
Тестувальна бібліотека - це група розробників утилітів, які використовують для написання окремих тестів на компоненти додатків. Деякі принципові частини тесту є:
Опис:
описує те, про тест
Використання / рендеринг:
використовує компонент у середовищі, де його можна перевірити
Насмішка:
створює функції прикидатися, щоб ви могли перевірити свої припущення
Протягом цієї статті я збираюся вивчити деякі приклади з бібліотеки тестування реагування, щоб допомогти вам розпочати роботу з цим цінним способом покращення надійності вашого коду, а також забезпечення вашого коду не кидає будь-які неприємні сюрпризи, як тільки воно займається виробництвом.
Хочете більше корисних ресурсів? Ось кращий
Інструменти для веб-дизайну
навколо, що допоможе вам працювати розумніші. Або якщо вам потрібна нова машина, спробуйте цей обіг
Кращі ноутбуки для програмування
. Або якщо ви створюєте новий сайт, вам може знадобитися велика
Веб-будівельник
.
01. Початок роботи з бібліотекою тестування реагування
Я збираюся використовувати програму Create-Regre-App для цієї демонстрації, оскільки вона вже виникає попередня за допомогою бібліотеки тестування. Якщо ви використовуєте GATSBY або спеціальну установку, може бути певна конфігурація, яку потрібно виконати, перш ніж почати використовувати бібліотеку тестування.
Почати, давайте створимо нову програму. Якщо ви вже маєте останню версію Node.js, ви можете запустити наступну команду, не встановлюючи нічого іншого глобально:
npx create-react-app netmag-javascript-testing
02. Вирішіть, що тестування
Уявіть, що у нас є простий компонент, скажіть кнопку з певною державою. Які деякі речі, які потребують тестування в компоненті, як це?
●
Поява компонента:
Ми не хочемо нічого змінити несподівано після того, як ми написали наш компонент. Таким чином, ми збираємося написати тест знімків, щоб захопити, як це робить. Потім, якщо щось змінюється, ми побачимо це швидко без ручного або візуального тесту. Це відмінно підходить для компонентів, які складаються з багатьох менших компонентів: ви можете швидко побачити, коли (і де) його виникнення.
●
Різні гілки, які надають:
Оскільки ми могли б мати два або більше різних виводів, нам потрібно перевірити, що він правильно надає всі вони, а не тільки один з них. Таким чином, нам потрібно імітувати подію клацання та мати інший тест знімків для того, як він робить, після того, як ця галузь коду була запущена.
●
Що функції називаються як очікувалося:
Ми хочемо, щоб код, який ми писали, щоб зателефонувати іншу функцію, як ми припускаємо, що це буде. Але оскільки ця функція є зовнішньою залежністю, ми не хочемо тестувати тут. Наші тести повинні інкапсулювати лише функціональність, яку ми хочемо.
Давайте написати наш перший тест. Створіть новий файл під назвою
Mycomponent.unit.test.js
У тій же папці, як компонент. Додаючи TEST.JS в кінці, це буде автоматично підібрано бібліотекою тестування. Вміст цього файлу нижче:
Імпорт реагування з "Реагую"
Імпорт {render} від '@ testing-library / reach'
Імпорт MyComponent від "./mycomponent"
описують ('& lt; mycomponent / & gt;', () = & gt; {
// Тести йдуть тут
})
Перше, що я хочу звернути вашу увагу, це
Опишіть ()
Функція, яка бере два аргументи: перший - це рядок, який ви можете використовувати для кращого опису - як рядок тексту - який ваш тест буде робити. У нашому випадку ми просто сказали, що це має зробити. Це дуже корисно, коли хтось інший дивиться на ваш код, або ви повинні пам'ятати, що ви зробили на більш пізньому етапі. Написання хороших опису заяв є формою кодової документації та іншої вагової причини для написання тестів.
Другий аргумент - це ваші тести. Точний
Опишіть ()
Функція буде працювати всі ці тести один за одним.
04. Використовуйте функцію очищення
Давайте запровадимо помітну функцію
перед ()
. Ми повинні використовувати це, тому що кожен раз, коли ми щось робимо з компонентом, ми хочемо, щоб свіжа копія без реквізитів, яку ми раніше передали до нього, як і раніше, існує в компоненті. Або нам, можливо, доведеться повторно надавати компонент:
перед ()
Це для нас, і ми можемо передати його функцією очищення.
Імпорт {Render, Cleanup} з "Тестування-бібліотека" @
...
Опишіть ("компонент повинен рендефонувати", () = & GT; {
перед (очищення)
}
На цьому кроці ми збираємося "монтувати" наш компонент (або зробити це).
Опишіть ("Компонент повинен рендефонувати", () = & GT; {
перед (очищення)
це ("надає основні реквізиції", () = & GT; {
рендеринг (& lt; mycomponent / & gt;)
})
}
Цей рендеринг дає нам доступ до всіх наданих властивостей складового компонента. Може бути добре, щоб кинути це в
console.log ()
Таким чином, ви можете побачити більш чітко, що це робить.
Якщо ви це зробите, ви побачите, що є кілька корисних властивостей, які ми можемо скористатися тут. Я збираюся зробити твердження (зробити тестувати декларацію) і перевірити його, витягнувши контейнер. Контейнер містить "вузли DOM (весь HTML), пов'язаний з компонентом.
Це ("надає основні реквізиції", () = & GT; {
const {container} = render (& lt; mycomponent / & gt;)
})
Тепер у нас є доступ до контейнера, як я можу сказати, що це дано відповідно до мого твердження? Додаючи тест з знімка.
Подумайте про знімок як фотографію. Він приймає знімок нашого компонента в певний момент часу. Тоді, коли ми внесемо зміни до коду, ми можемо побачити, чи він все ще відповідає оригінальному знімку. Якщо це так, ми можемо бути впевненими, що ніщо не змінилося в компоненті. Однак, якщо це не так, ми могли б розкрити проблему, яка виникла в іншому компоненті, тому ми, можливо, раніше не помітили:
06. Тестові властивості
Реквізити, властивості, компонента можуть бути перевірені з знімками. Тестування різних реквізитів, які ви надаєте вашому компоненту, дасть вам більшу охоплення та впевненість. Ви ніколи не знаєте, коли вимога буде означати реквізити вашого компоненту, а остаточний вихід буде змінюватися.
Додайте наступний об'єкт у верхній частині вашого файлу:
Ми визначаємо властивості у об'єкті, а потім використовують оператор розповсюдження (три точки, що йдуть на ім'я об'єкта:
... Lightproperties)
Тому що ми можемо лише пройти один аргумент, коли ми робимо цей шлях. Це також корисно бачити, які властивості ви проходять окремо:
Уявіть собі, що наш компонент має кнопку, і ви хочете переконатися, що щось відбувається, коли кнопка натискається. Ви можете подумати, що ви хочете перевірити стан заявки; Наприклад, ви можете спокусити тестування, що держава оновлювалася. Однак це не об'єкт цих тестів.
Це вводить нас до важливої концепції у використанні бібліотеки тестування: ми не тут, щоб перевірити стан або спосіб нашого компоненту. Ми тут, щоб перевірити, як люди збираються використовувати компонент, і це відповідає їхнім очікуванням.
Так що держава оновлюється, є нематеріальним; Те, що ми хочемо випробувати, - це результат цієї кнопки.
Давайте уявіть, що ми перевіряємо результат функції, яка змінює інтерфейс з темного режиму до режиму світла. Ось компонент:
Ви помітили, що ми додали новий атрибут
Дані-тестіда
до кнопки? Ось як ви можете перевірити це. По-перше, імпортуйте нову функцію, Fireevent від бібліотеки тестування:
Імпортувати {очищення,
firevent,
віддавати
} Від '@ тестування-бібліотека / реагування
Ми можемо використовувати цю функцію для тестування, що існують зміни в інтерфейсі UI, і ці зміни відповідають:
Це чудово: ми не повинні вручну йти на сайт і озирнутися, а потім натисніть кнопку і подивіться на другий раз - під час якого ви можете визнати, ви, швидше за все, забудете чи пропустити щось! Тепер ми можемо впевнено, що, з урахуванням того ж введення, ми можемо очікувати таку ж випуск у нашому компоненті.
Коли мова йде про тестування ідентифікаторів, я особисто не люблю користуватися
Дані-тестіда
знайти щось у домі. Врешті-решт, об'єкт випробувань є імітувати, що робить користувач, і тестування, що відбувається, коли вони роблять.
Дані-тестіда
Відчуває себе трохи чит - хоча Data-teppings, швидше за все, вживаються для вашого інженера "QA" (див. Фарбує роль інженерів з забезпечення якості).
Замість цього ми могли б використовувати
getbytext ()
і пройти в текст нашої кнопки. Цей метод буде набагато більше конкретної поведінки.
08. Макет і шпигун функція
Іноді нам, можливо, доведеться перевірити виклик до функції, але ця функція знаходиться поза обсягом тесту. Наприклад, у мене є окремий модуль, який містить функцію, яка обчислює значення ПІ до певної кількості десятків.
Мені не потрібно перевіряти, що є результатом цього модуля. Мені потрібно перевірити, що моя функція робить як очікувалося. Щоб отримати додаткові відомості про те, чому це, будь ласка, перегляньте тестування коробки та інтеграції. У цьому випадку ми могли "висміювати" цю функцію:
Функція
tohavebencalledtimes ()
є однією з багатьох допоміжних функцій у бібліотеці тестування, яка дозволяє нам
для перевірки виходу функцій. Це дозволяє нам не тільки масштабувати наші тести лише до модуля, який ми хочемо випробувати, але також означає, що ми можемо "шпигун" або побачити, яка наша функція робить, коли він викликає цю функцію.
Тести написання може здатися трохи складним, щоб почати. Я сподіваюся, що цей підручник дав вам трохи більше довіри. Оскільки я почав писати тести для моїх додатків, я дійсно не можу повернутися: я можу легше відпочивати, знаючи, що я залишаю за набагато кращою спадщиною для тих, хто буде використовувати свою роботу в майбутньому.
Пам'ятайте, якщо ви створюєте складний сайт, ви захочете отримати
веб хостинг
Обслуговування. І якщо цей сайт може містити багато активів, зберігаючи їх надійним
хмара зберігання
має вирішальне значення.
Цей вміст спочатку з'явився
чистий журнал
. Читати далі
Веб-дизайн Статті Тут
.
Читати далі:
HTML6: Що це таке, і коли це прибуде?
Напишіть HTML-код швидше
Дизайн мобільного додатка: Посібник для початківців
