Migrace testů AngularJS Z Karmy na Jest

Odmítnutí odpovědnosti

Toto je jen zápis toho, jak jsme migrovali naše testy AngularJS na Jest, není to průvodce a určitě existují prvky, které nebudu pokrývat, ale doufám, že to někomu pomůže.

V tomto příspěvku se předpokládá, že máte dobré znalosti v konfiguraci javascriptového testování jednotek pomocí karmy, že jste slyšeli nebo znáte Jest a že NPM, Babel, Typescript jsou vám známé.

Tento článek vysvětluje, co je Jest a některé další nástroje docela dobře.

Kontext

Na konci roku 2017 jsme začali s migrací celé naší front-endové kódové základny na Typescript a Webpack. Podle mého názoru je Typescript darem z nebes pro velké podnikové báze javascriptového kódu a my si toho vážíme. Údržba starého nastavení se komplikovala, protože bylo vyrobeno na zakázku a ve skutečnosti se neřídilo doporučenými postupy pro javascript.

Náš front-end kód je rozdělen do dvou částí:

  • knihovnu opakovaně použitelných komponent, které interně používáme ve všech aplikacích
  • kód, který používá knihovnu a obsahuje prvky specifické pro aplikaci (zobrazení, vlastní komponenty, služby atd...)

Staré nastavení vyžadovalo, abychom vytvořili knihovnu a poté vytvořili aplikaci, která na ní závisí, a spoustu věcí, které vám způsobí noční můry; dokonce jsme měli na některých místech napsáno "černá magie". Pokud někdy na takové věci narazíte v kódové základně, nevoní to. Myslím, že i vy souhlasíte, že jsme museli věci změnit a změnili jsme to.

Abychom se vrátili k tématu, po nastavení našeho nového sestavení s Webpack a převedení našich souborů js na strojopis; zbývala poslední věc, kterou bylo třeba udělat:nechat testy znovu fungovat!

Ach, neříkal jsem ti to? Kromě toho, co bylo zmíněno dříve, naše testy již neběžely jako vedlejší efekt všech vlastních věcí.

Nastavení testu bylo založeno na Karma/Mocha/Grunt/PhantomJS a už to prostě nešlo. Mým prvním reflexem bylo aktualizovat testy, aby fungovaly s karmou, ale to se ukázalo jako skličující úkol, než jsem očekával. Pluginový systém
karma může být v pohodě, ale tentokrát to byl spíš problém než cokoli jiného. Zkoušel jsem karma-typescript (opravdu pěkný lib a úžasný správce, zakřič na @monounity); Zpočátku to šlo dobře, většina testů knihoven fungovala a to vše, ale když jsem se pokusil spustit testy aplikace, rozpoutalo se peklo. Použili jsme jmenné prostory pro lib a karma-typescript to opravdu neměl rád, takže jsem otevřel problém, který monouty opraveno, ale pak jsem narazil na další problémy.

Ve světle všech těchto problémů jsem to nedokázal zprovoznit včas a musel jsem to chvíli nechat být, byly tu další věci, které bohužel vyžadovaly mou pozornost. Rychle vpřed na 12. dubna 2018 jsem se zúčastnil setkání s přítelem, které se týkalo TDD a BDD (článek o setkání ve francouzštině, ale se snímky v angličtině) a použili Jest (woohoo, konečně o tom mluví). Slyšel jsem o frameworku a četl jsem tento dobrý článek o jeho použití pro úhlové aplikace. To mi připomnělo můj nedokončený obchod s karmou. Navrhl jsem Jest svému týmu a vzhledem k mým předchozím problémům s karmou jsme se rozhodli pokračovat a migrovat (nevím, dokud to nezkusíš) všechny naše testy.

Migrace

konfigurace karmy

Zde jsou karma konfigurační soubory, které jsme použili. První je pro aplikaci a nebyl žádný pokus o její zprovoznění. Druhá je pro naši interní knihovnu a je to ta, kterou jsem se snažil zprovoznit.

Konfigurace Jest

Začal jsem číst oficiální dokumentaci (kdo řekl, že vývojáři nečtou manuál?) a byla tam část o testování webových rámců, která vedla k mému dříve zmíněnému článku a tomuto životu zachraňujícímu článku od @benbrandt. Není mnoho článků o Jest + Angular a věřte mi, že to potřebujete, když děláte tento druh migrace.

Strojopis

Používáme Typescript a Jest ho nativně nepodporuje, takže k této práci potřebujeme preprocesor. Vstupte do TS-Jest, udělá vše za vás.

Takže skončíme s transformací, která vypadá takto.

    "transform": {
      "^.+\\.ts?$": "ts-jest",
    },

Také jsem musel vytvořit samostatný tsconfig soubor pro ts-jest protože nepodporuje všechny možnosti, které používáme v našem konfiguračním souboru strojopisu. Zakázal jsem také TsDiagnostics ale neměl bys

    "globals": {
      "ts-jest": {
        "tsConfigFile": "test-tsconfig.json",
        "enableTsDiagnostics": false
      }
    }

Jmenný prostor

Chvíli jsem četl články a začal vytvářet konfigurační soubor pro testy knihovny. První problém, na který jsem narazil, byla správa našeho jmenného prostoru. Po chvíli čtení dokumentů jsem viděl moduleNameMapper možnost a bylo to, problém vyřešen.

    "moduleNameMapper": {
      "customNamespace/(.*)$": "<rootDir>/src/$1",
    },

Načítání html souborů

K sestavování a načítání html souborů používáme webpack pomocí html-loaderu webpacku . Pro testy jsem potřeboval stejnou funkcionalitu. Po několika vyhledáváních na Googlu jsem později našel tento problém s přetečením zásobníku. Po přečtení všech komentářů a odpovědí jsem se rozhodl následovat jejich rady a vytvořit vlastní preprocesor pro Jest (ano, Jest vám to umožňuje).

Zbývá už jen to zahrnout do konfigurace.

    "transform": {
      "^.+\\.ts?$": "ts-jest",
      "^.+\\.html$": "<rootDir>/src-test/utils/htmlLoader.ts"
    },

Ujistěte se, že značka img neporušuje mé testy

V některých našich html šablonách přímo importujeme obrázky a to s Jestem nefunguje; musíš to utlumit. Hledání na internetu mě přivedlo k tomuto balíčku jest-static-stub, který je pro tuto práci prostě ideální. V moduleNameMapper části config přidáme pouze správný řádek:

    "moduleNameMapper": {
      "customNameSpace/(.*)$": "<rootDir>/src/$1",
      "^.+\\.(jpg|jpeg|gif|png|mp4|mkv|avi|webm|swf|wav|mid)$": "jest-static-stubs/$1"
    }

Angular-mocks a globální jquery

Vzhledem k tomu, jak určité věci fungují s úhlem (to je lépe vysvětleno v článku pana Brandta), musíme určité hodnoty (Jquery, Angular) vystavit v globálním rozsahu. Kromě toho musíme importovat angular-mocks takže Angular nastaví aplikaci před spuštěním testů. To vše je ve formě init souboru, na který se později odkazuje v konfiguraci Jest.

Obsah iniciačního souboru:

Odkazování na konfiguraci v konfiguraci Jest:

"setupTestFrameworkScriptFile": "<rootDir>/src-test/utils/init.ts",

Konfigurace knihovny

Skončili jsme s konfigurací pro Jest, jako je tato v našem package.json :

To bylo vše pro naše testy knihoven a dokonce jsme měli pokrytí kódem, aniž bychom přidali cokoli dalšího. Třešničkou navrch pro mě jako fanboye vs-code je existence tohoto rozšíření. Rozšíření je docela cool a doporučil bych ho vyzkoušet, pokud používáte vs-code a Jest.

Když jsem přešel k aplikačním testům, myslel jsem si, že to bude jednoduchá věc zkopírovat, vložit a upravit.... Netušila jsem, že nás čekají další problémy.

Podpora modulu ES6

Jak již bylo uvedeno, náš kód je rozdělen na dvě části:knihovnu, která je modulem npm, a aplikace, které jsou na ní závislé. Knihovna je napsána strojopisem a kompilujeme do es6. Potřeboval jsem nakonfigurovat Jest, aby správně načítal moduly es6 a tento problém měl odpověď někde ve vláknu. Řešením bylo použít babel-jest pro soubory js (moje moduly_uzlů v tomto případě) a přidat .babelrc soubor do mého projektu obsahující:

Transformační část konfigurace Jest se stala:

    "transform": {
      "^.+\\.js?$": "babel-jest",
      "^.+\\.ts?$": "ts-jest",
      "^.+\\.html$": "<rootDir>/src-test/utils/htmlLoader.ts"
    },

Konečná konfigurace Jest se příliš neliší od konfigurace lib:

Srovnání s karmou

Výkon mezi Jestem a Karmou nelze srovnávat, protože neexistuje žádná reference z doby, kdy testy karmy fungovaly. Mohu vám říci, že Jest trvá 38,425 sekund spustit 92 testy organizované v 9 testovací sady a spuštění pokrytí. Šli jsme od 13 do 4 závislosti (jest, ts-jest, babel-jest, jest-static-stubs ) potřebné ke spuštění našich testů. PhantomJS již není potřeba, protože Jest používá JSdom; to lze považovat za výhodu nebo nevýhodu, protože již netestujeme proti skutečným prohlížečům. Doufám, že testování proti skutečným prohlížečům může být pro Jest v budoucnu možností.

Závěr

Nebylo to snadné, ale podle mého názoru to stálo za to; nyní máme lépe udržovatelnou a modernější testovací konfiguraci. Testování může být zábava se správnými nástroji a doufám, že s tímto nastavením budeme moci naši testovací základnu pravidelně doplňovat.

Velké poděkování patří komunitě open source, bez které by to nebylo ani z poloviny tak snadné. Doufám, že vám to pomůže.

Velké díky Stevenovi, Samovi a Jean-Baptistovi za rady a úpravy.

Poděkování za fotografii patří @weilstyle.