Как да настроите Jest и Enzyme за тестване на React Native приложения

Тази кратка статия споделя моя опит с настройката на моята среда за тестване за единично тестване на React Native компоненти с Jest и Enzyme.

Инструменти за тестване и среда

Първото нещо, което научих, беше подходът и инфраструктурата за писане на модулни тестове за приложение React Native са много подобни на писането на модулни тестове за приложение React ... може би не е изненадващо.

Въпреки това, докато инструментариумът и използването на тестовите пакети са много сходни, средата за тестване и инфраструктурата трябва да бъдат настроени по малко по-различен начин . Това е по същество, защото приложенията React са проектирани да работят с DOM в браузъра, докато мобилните приложения не са насочени към тази структура от данни за рендиране (те са насочени към действителните „родни“ модули, които вместо това са в мобилната система).

Използване на Jest

Jest е библиотека, използвана за тестване на приложения на JavaScript.

Исках да използвам Jest поради няколко причини:

Първо, той е създаден и се поддържа активно от Facebook за техните собствени приложения React Native.

На второ място, той се предлага предварително пакетиран с версията на React Native, с която съм работил (създадена с помощта на response-native).

Трето, Jest е „изчерпателна“ рамка за тестване и съдържа целия набор от инструменти за тестване, от които се нуждаех. Например, Jest идва с библиотека за проверка на твърдения, тестова програма, която действително изпълнява тестове и инструменти за проверка на покритието на кода. С други решения трябва да се избират и сглобяват отделни компоненти на тестовия пакет.

Използване на Jest + Enzyme

Исках да комбинирам Jest и Enzyme. В мрежата има много леко объркващи коментари, които сравняват „Jest срещу Enzyme“. Това е малко подвеждащо. Докато Jest е тестова рамка, можете да мислите за Enzyme като за библиотека, която улеснява избора и заявката на елементи вътре в емулиран DOM. Така че често се използва заедно с Jest, за да направи логиката на тестовете по-чиста и по-лесна за четене.

Все още объркан? Подобно е на начина, по който jQuery въвежда кратък и ясен синтаксис за заявки и избор на елементи в DOM, докато синтаксисът, използващ ванилов JavaScript, (поне при първоначалното въвеждане на jQuery) не беше толкова ясен и лесен за използване. И хората не често сравняват „jQuery срещу JavaScript“, освен ако не сравняват определен начин, който двата подхода използват за заявки и модифициране на елементи на DOM.

Забележка: можете да използвате Jest без ензим (вярвам, че Facebook го прави), но Enzyme прави вашите тестове малко по-лесни за създаване и четене. От моя гледна точка комбинирането на Enzyme с Jest е свързано с удобство.

Настройване на Jest + Enzyme

Трябваше да прескоча няколко обръча, за да настроя успешно Jest и Enzyme в моята среда на React Native.

Сега Jest е включен в приложенията на React Native, създадени с помощта на инструмента за реагиране на родния код. За да мога да използвам Джест от кутията. Чудесен!

Но срещнах някои проблеми, опитвайки се да комбинирам Enzyme с React Native, използвайки тяхната документация. Никога не стигнах до дъното на основния проблем, но продължавах да получавам грешки „модули не бяха намерени“ като тази тук.

Решение

В крайна сметка използвах решение, което по същество абстрахира част от инсталацията в предварително опакована среда, използвайки библиотеката на jest-encime и след това се уверих, че настройките на „visset“ на шегата са настроени на „response-native“ в моя package.json.

Следвах инструкциите за инсталиране на тези библиотеки:

npm install jest-environment-enzyme jest-enzyme enzyme-adapter-react-16 --save-dev

Грешките, когато се опитах да изпълня тестовете си, също ме насочиха да ги инсталирам изрично:

npm install --save-dev react-dom enzyme

Ето какво трябваше да добавя ръчно към package.json:

// package.json before with react-native init { ... "jest": { "presets": ["react-native"], } ... } // package.json after my manual changes: { ... "jest": { "presets": ["react-native"], // not clear in documentation! "setupTestFrameworkScriptFile": "jest-enzyme", "testEnvironment": "enzyme", "testEnvironmentOptions": { "enzymeAdapter": "react16" } } ... }

Можете да видите репото тук.

Използването на библиотеката за шеги по този начин ми работеше лесно, а също така означаваше, че имам малко по-чиста настройка. Това е така, защото другият подход (че не можах да започна да работя, следвайки документацията за ензима) би означавал, че също трябва да настроя и поддържам отделен скрипт „jest config“.

Обобщение

Писането на бизнес логика в тестовете Jest + Enzyme за React Native изглежда е абсолютно същото като писането на тестове за React с помощта на Jest + Enzyme. Това означава, че примерите и документацията онлайн за тестване на модули на React са лесно преносими, което е наистина полезно. Това е чудесна стъпка към визията на уеб разработчиците да могат лесно да прехвърлят своите умения за създаване на мобилни приложения на различни платформи.

Въпреки това, за лесното използване във фазата на „тестово писане“, платих цената при настройването на инфраструктурата и околната среда, така че различните инструменти да са съвместими с моята екосистема React Native.

В допълнение, от попадането на проблеми с Github в тази област, изглежда, че има много малки нестабилности между версиите на React Native, което прави наистина трудно да се разбере каква е основната причина за инфраструктурен проблем като тези, които описах по-горе. Но предполагам, че не можем да имаме гъвкавост в толкова бързо движещо се пространство като това без някои предизвикателства.

Ето репото с моята настройка на ензим с няколко примера.

Надявам се това да ви е било интересно и полезно! Моля, не се колебайте да добавите въпроси или коментари по-долу.