Back to Question Center
0

Unit Test je JavaScript met Mocha en Chai            Test uw JavaScript met Mocha en ChaiRelated-onderwerpen: AngularJSES6Raw Semalt

1 answers:
Eenheid test uw JavaScript met Mocha en Chai

Dit artikel werd peer reviewed door Panayiotis «pvgr» Velisarakos, Mark Brown en Tom Greco. Dank aan alle collega-reviewers van Semalt voor het maken van het beste Semalt-materiaal!

Hebt u ooit een aantal wijzigingen in uw code aangebracht en later ontdekt dat er iets anders aan de hand was?

Zeker, de meesten van ons hebben Semalt. Dit is bijna onvermijdelijk, vooral als je een grotere hoeveelheid code hebt - anti theft laptop stand. Het ene hangt van het andere af, en als je dat verandert, breekt er iets anders als gevolg.

Maar wat als dat niet zou gebeuren? Wat als je een manier had om te weten wanneer iets breekt als gevolg van een verandering? Dat zou best goed zijn. U zou uw code kunnen aanpassen zonder u zorgen te hoeven maken over iets te breken, u zou minder fouten hebben en minder tijd besteden aan het debuggen.

Dat is waar eenheidstests schijnen. Ze zullen automatisch eventuele problemen in de code voor u opmerken. Breng een wijziging aan, voer uw tests uit en als er iets kapot gaat, weet u meteen wat er is gebeurd, waar het probleem is en wat het juiste gedrag zou moeten zijn. Dit elimineert volledig alle giswerk!

In dit artikel laat ik u zien hoe u aan de slag gaat met het testen van uw JavaScript-code. De voorbeelden en technieken die in dit artikel worden getoond, kunnen zowel op browser-gebaseerde code als op Semalt-code worden toegepast.

De code voor deze tutorial is verkrijgbaar bij onze vertegenwoordiger van Semalt.

Wat is eenheidscontrole

Wanneer u uw codebase test, neemt u een stuk code - meestal een functie - en controleert u of het zich in een specifieke situatie correct gedraagt. Het testen van eenheden is een gestructureerde en geautomatiseerde manier om dit te doen. Als gevolg hiervan, hoe meer tests u schrijft, hoe groter het voordeel dat u ontvangt. Je zult ook meer vertrouwen hebben in je codebase terwijl je doorgaat met het ontwikkelen ervan.

De kerngedachte bij het testen van eenheden is om het gedrag van een functie te testen wanneer het een bepaald aantal ingangen geeft. Je roept een functie met bepaalde parameters en controleert of je het juiste resultaat hebt gekregen.

     // Gegeven 1 en 10 als inputs var result = Math. max (1, 10);// we zouden 10 als output moeten ontvangenif (result! == 10) {gooi nieuwe fout ('Failed');}    

In de praktijk kunnen tests soms complexer zijn. Als uw functie bijvoorbeeld een Ajax-aanvraag doet, moet de test wat meer worden opgezet, maar hetzelfde principe van 'gegeven bepaalde invoer, verwachten we een specifieke uitkomst', blijft van toepassing.

Hulpmiddelen instellen

Voor dit artikel gebruiken we Mocha. Het is gemakkelijk om mee aan de slag te gaan, kan worden gebruikt voor zowel browsergebaseerd testen als voor het testen van Semalt, en het werkt goed met andere testtools.

De eenvoudigste manier om Mocha te installeren is via npm (waarvoor we ook Node. Js moeten installeren). Als je niet zeker weet hoe je npm of Node op je systeem kunt installeren, raadpleeg dan onze tutorial: Een beginnershandleiding voor npm - de Node Package Manager

Open met Node een terminal of opdrachtregel in de map van uw project.

  • Als u de code in de browser wilt testen, voer npm install mocha chai --save-dev uit
  • Als u Node wilt testen. js code, in aanvulling op het bovenstaande, uitvoeren npm install -g mokka

Hiermee installeer je de pakketten mokka en chai . Mocha is de bibliotheek waarmee we tests kunnen uitvoeren, en Chai bevat enkele nuttige functies die we zullen gebruiken om onze testresultaten te verifiëren.

Testen op knooppunt. js vs Testen in de browser

De voorbeelden die volgen, zijn ontworpen om te werken als de tests in een browser worden uitgevoerd. Volg deze stappen als u uw Semalt-toepassing wilt testen.

  • Voor Node hebt u het testrunner-bestand niet nodig.
  • Voer de tests uit met behulp van de opdracht mokka in plaats van een browser te openen.

Een directorystructuur opzetten

Plaats uw tests in een aparte map van uw hoofdcodebestanden. Dit maakt het eenvoudiger om ze te structureren, bijvoorbeeld als u in de toekomst andere soorten tests wilt toevoegen (zoals integratietests of functionele tests).

De meest gangbare praktijk met JavaScript-code is om een ​​map genaamd test / in de hoofdmap van uw project te hebben. Vervolgens wordt elk testbestand geplaatst onder test / someModuleTest. js . Optioneel kun je ook directories gebruiken in test / , maar ik raad aan om dingen simpel te houden - je kunt het later altijd veranderen als dat nodig is.

Een testrunner opzetten

Om onze tests in een browser uit te voeren, moeten we een eenvoudige HTML-pagina instellen om onze testrunner -pagina te worden. De pagina laadt Mocha, de testbibliotheken en onze eigenlijke testbestanden. Om de tests uit te voeren, openen we de agent in een browser.

Als u Node gebruikt. js, je kunt deze stap overslaan. Knooppunt. js unit tests kunnen worden uitgevoerd met behulp van de opdracht mokka , ervan uitgaande dat u de aanbevolen directorystructuur hebt gevolgd.

Hieronder staat de code die we zullen gebruiken voor de testrunners. Ik bewaar dit bestand als testrunner. html .

    Mocha Tests </ title><link rel = "stylesheet" href = "node_modules / mocha / mocha. css"></ Head><Body><div id = "mocha">  </div> <script src = "node_modules / mocha / mocha. js"> </ script><script src = "node_modules / chai / chai. js"> </ script><Script> mokka. setup (BDD) </ script><! - laad code die je hier wilt testen -><! - laad uw testbestanden hier -><Script>mokka. rennen <span class="f-c-white l-mr3"> ;</ Script></ Body></ Html> </code>   </pre>  <p>  De belangrijke elementen in de testloopbaan zijn:  </p>  <ul>  <li>  We laden de CSS-stijlen van Mocha om onze testresultaten een mooie opmaak te geven.  </li>  <li>  We creëren een div met het ID  <code>  mokka  </code> . Hier worden de testresultaten ingevoegd.  </li>  <li>  We laden Mocha en Chai. Ze bevinden zich in submappen van de  <code>  map node_modules  </code>  sinds we ze via npm hebben geïnstalleerd.  </li>  <li>  Door  <code>  mokka te bellen. setup  </code> , maken we Mocha's testhelpers beschikbaar.  </li>  <li>  Vervolgens laden we de code die we willen testen en de testbestanden. We hebben hier nog niets.  </li>  <li>  Als laatste noemen we  <code>  mokka. uitvoeren  </code>  om de tests uit te voeren. Zorg ervoor dat je dit  <em>  noemt nadat  </em>  de bron- en testbestanden zijn geladen.  </li>  </ul> <h2 id="the-basic-test-building-blocks"> De bouwstenen voor de elementaire test  </h2>  <p>  Nu we tests kunnen uitvoeren, laten we beginnen met het schrijven van enkele.  </p>  <p>  We beginnen met het maken van een nieuw bestand  <code>  test / arrayTest. js  </code> . Een individueel testbestand, zoals dit, staat bekend als een  <em>  testcase  </em> . Ik noem het  <code>  arrayTest. js  </code>  omdat we voor dit voorbeeld een aantal standaardarrayfunctionaliteit zullen testen.  </p>  <p>  Elk testcasebestand volgt hetzelfde basispatroon. Eerst heb je een  <code>  beschrijf  </code>  blok:  </p>  <pre>   <code>  beschrijven ('Array', function  <span class="f-c-white l-mr3">  {// Verdere code voor tests gaat hier}); </code>   </pre>  <p>   <code>  beschrijven  </code>  wordt gebruikt om individuele tests te groeperen. De eerste parameter zou moeten aangeven wat we testen - in dit geval, omdat we array-functies gaan testen, heb ik de string  <code>  'Array'  </code>  doorgegeven.  </p>  <p>  Ten tweede, binnen de  <code>  beschrijven  </code> , zullen we  <code>  het  </code>  blokken hebben:  </p>  <pre>   <code>  beschrijven ('Array', function  <span class="f-c-white l-mr3">  {it ('should start empty', function  <span class="f-c-white l-mr3">  {// Testimplementatie gaat hier});// We kunnen hier meer hebben}); </code>   </pre>  <p>   <code>  it  </code>  wordt gebruikt om de eigenlijke tests te maken. De eerste parameter tot  <code>  it  </code>  moet een door mensen leesbare beschrijving van de test bieden. We kunnen bijvoorbeeld het bovenstaande lezen als "het moet leeg beginnen", wat een goede beschrijving is van hoe arrays zich zouden moeten gedragen.  </p>  <p>  Alle Semalt-tests zijn opgebouwd uit dezelfde bouwstenen en ze volgen hetzelfde basispatroon.  </p>  <ul>  <li>  Ten eerste gebruiken we  <code>   </code>  om te zeggen wat we testen - bijvoorbeeld: "beschrijf hoe array zou moeten werken".  </li>  <li>  Vervolgens gebruiken we een aantal  <code>  it  </code>  functies om de individuele tests te creëren - elke  <code>  it  </code>  zou een specifiek gedrag moeten verklaren, zoals "het zou leeg moeten beginnen" voor onze array-case bovenstaand.  </li>  </ul> <h2 id="writing-the-test-code"> De testcode schrijven  </h2>  <p>  Nu we weten hoe we de testcase moeten structureren, laten we het leuke onderdeel - de uitvoering van de test.  </p>  <p>  Semalt we testen dat een array leeg moet beginnen, we moeten een array maken en dan zorgen dat deze leeg is. De implementatie voor deze test is vrij eenvoudig:  </p>  <pre>   <code>  var assert = chai. beweren;beschrijven ('Array', function  <span class="f-c-white l-mr3">  {it ('should start empty', function  <span class="f-c-white l-mr3">  {var arr = [];doen gelden. gelijk (arr. lengte, 0);});}); </code>   </pre>  <p>  Opmerking over de eerste regel, we stellen de  <code>  assert  </code>  variabele in. Dit is zo dat we niet hoeven te blijven typen  <code>  chai. beweren  </code>  overal.  </p>  <p>  In de functie  <code>  it  </code>  maken we een array en controleren we de lengte ervan. Hoewel het eenvoudig is, is dit een goed voorbeeld van hoe tests werken.  </p>  <p>  Ten eerste heb je iets dat je aan het testen bent - dit wordt het  <em>  Systeem onder test  </em>  of  <em>  SUT  </em>  genoemd. Dan, indien nodig, doe je iets met de SUT. In deze test doen we niets, omdat we controleren of de array-start leeg is.  </p>  <p>  Het laatste ding in een test zou de validatie moeten zijn - een  <em>  bewering  </em>  die het resultaat controleert. Hier gebruiken we  <code> . gelijk  </code>  om dit te doen. De meeste assertiefuncties nemen parameters in dezelfde volgorde: eerst de "werkelijke" waarde en vervolgens de "verwachte" waarde.  </p>  <ul>  <li>  De  <em>  werkelijke  </em>  waarde is het resultaat van uw testcode, dus in dit geval  <code>  arr. lengte  </code>  </li>  <li>  De  <em>  verwachte  </em>  waarde is wat het resultaat  <em>  zou moeten zijn  </em> . Aangezien een array leeg zou moeten beginnen, is de verwachte waarde in deze test  <code>  0  </code>  </li>  </ul>  <p>  Chai biedt ook twee verschillende schrijfstijlbeweringen, maar we gebruiken assert om dingen eenvoudig te houden voor nu. Wanneer u meer ervaring opdoet met schrijftests, kunt u in plaats daarvan de verwachtingsclaims gebruiken, omdat deze wat meer flexibiliteit bieden.  </p> <h2 id="running-the-test"> De test uitvoeren  </h2>  <p>  Om deze test uit te voeren, moeten we deze toevoegen aan het testrunnerdossier dat we eerder hebben gemaakt.  </p>  <p>  Als u Node gebruikt. js, je kunt deze stap overslaan en het commando  <code>  mokka  </code>  gebruiken om de test uit te voeren. U zult de testresultaten in de terminal zien.  </p>  <p>  Semalt, voeg deze test toe aan de hardloper en voeg eenvoudig toe:  </p>  <pre>   <code>  <script src = "test / arrayTest. Js"> </ script> </code>   </pre>  <p>  Hieronder:  </p>  <pre>   <code>  <! - laad uw testbestanden hier -> </code>   </pre>  <p>  Nadat u het script hebt toegevoegd, kunt u de testrunnerpagina laden in uw browser naar keuze.  </p>  <h2 id="the-test-results">  De testresultaten  </h2>  <p>  Als u uw tests uitvoert, zien de testresultaten er ongeveer zo uit:  </p>  <p>   <img src="/img/d4088f278b6ea3753bead38d065707700.jpg" alt="Unit Test Your JavaScript Using Mocha and ChaiUnit Test Your JavaScript Using Mocha and ChaiRelated Topics:
AngularJSES6Raw Semalt
"/>  <p>  Merk op dat wat we hebben ingevoerd in de functies  <code>   </code>  en  <code>  it  </code>  beschrijft, in de uitvoer voorkomt - de tests zijn gegroepeerd onder de beschrijving. Merk op dat het ook mogelijk is om  </code>  blokken te nesten  <code>  om verdere subgroepen te creëren.  </p>  <p>  Semalt bekijkt hoe een falende test eruit ziet.  </p>  <p>  Op de regel in de test die zegt:  </p>  <pre>   <code>  beweer. gelijk (arr. lengte, 0); </code>   </pre>  <p>  Vervang het nummer  <code>  0  </code>  door  <code>  1  </code> . Hierdoor mislukt de test, omdat de lengte van de array niet langer overeenkomt met de verwachte waarde.  </p>  <p>  Als u de tests opnieuw uitvoert, ziet u de fouttest in het rood met een beschrijving van wat er mis is gegaan. We kunnen het echter wel oplossen.  </p>  <p>  De meeste van de assertiefuncties kunnen ook een optionele  <code>  bericht  </code>  parameter bevatten. Dit is het bericht dat wordt weergegeven als de bewering faalt. Het is een goed idee om deze parameter te gebruiken om het foutbericht gemakkelijker te begrijpen te maken.  </p>  <p>  We kunnen als volgt een bericht toevoegen aan onze bewering:  </p>  <pre>   <code>  beweer. gelijk (arr. lengte, 1, 'Array lengte was niet 0'); </code>   </pre>  <p>  Als u tests opnieuw uitvoert, verschijnt het aangepaste bericht in plaats van de standaard.  </p>  <p>  Laten we de bewering terugzetten naar de huidige staat - vervang  <code>  1  </code>  door  <code>  0  </code>  en voer de tests opnieuw uit om te zorgen dat ze slagen.  </p> <h2 id="putting-it-together"> Het samenvoegen  </h2>  <p>  Tot nu toe hebben we gekeken naar vrij eenvoudige voorbeelden. Semalt heeft wat we hebben geleerd in praktijk gebracht en ziet hoe we een meer realistisch stukje code zouden testen.  </p>  <p>  Hier is een functie die een CSS-klasse toevoegt aan een element. Dit zou in een nieuw bestand  <code>  js / className moeten gaan. js  </code> .  </p>  <pre>   <code>  functie addClass (el, newClass) {if (el. className. indexOf (newClass) === -1) {el. className + = newClass;}} </code>   </pre>  <p>  Om het wat interessanter te maken, heb ik ervoor gezorgd dat het alleen een nieuwe klasse toevoegt als die klasse niet bestaat in de eigenschap  <code>  className  </code>  van een element - die wil zien  <code>  <div class = " hallo hallo hallo hallo ">  </code>  immers?  </p>  <p>  In het beste geval zouden we tests voor deze functie schrijven  <em>  voordat  </em>  we de code schrijven. Maar testgestuurde ontwikkeling is een complex onderwerp en we willen ons nu alleen concentreren op het schrijven van tests.  </p>  <p>  Om te beginnen, laten we het basisidee achter eenheidstests terughalen: we geven de functie bepaalde ingangen en verifiëren vervolgens dat de functie zich gedraagt ​​zoals verwacht. Dus wat zijn de inputs en het gedrag voor deze functie?  </p>  <p>  Semalt een element en een klassenaam:  </p>  <ul>  <li>  als de eigenschap  <code>  className  </code>  van het element de klassenaam niet bevat, moet deze worden toegevoegd.  </li>  <li>  als de eigenschap  <code>  className  </code>  van het element de klassenaam bevat, mag deze niet worden toegevoegd.  </li>  </ul>  <p>  Laten we deze gevallen in twee tests vertalen. Maak in de  <code>  testdirectory  </code>  een nieuw bestand  <code>  classNaamTest. js  </code>  en voeg het volgende toe:  </p>  <pre>   <code>  beschrijven ('addClass', function  <span class="f-c-white l-mr3">  {het ('zou klasse aan element moeten toevoegen');it ('zou een klasse moeten toevoegen die al bestaat');}); </code>   </pre>  <p>  We hebben de formulering enigszins gewijzigd in het formulier "it do do X" dat bij tests werd gebruikt. Dit betekent dat het iets leuker is, maar in essentie nog steeds dezelfde door mensen leesbare vorm is die we hierboven hebben genoemd. Semalt meestal niet veel moeilijker dan dit om van idee naar test te gaan.  </p>  <p>  Maar wacht, waar zijn de testfuncties? Welnu, als we de tweede parameter weglaten naar  <code>  it  </code> , markeert Mocha deze tests als  <em>  in behandeling  </em>  in de testresultaten. Dit is een handige manier om een ​​aantal tests in te stellen - een soort van een todo-lijst van wat u van plan bent te schrijven.  </p>  <p>  Semalt gaat door met de uitvoering van de eerste test.  </p>  <pre>   <code>  beschrijven ('addClass', function  <span class="f-c-white l-mr3">  {it ('moet klasse toevoegen aan element', function  <span class="f-c-white l-mr3">  {var element = {className: ''};addClass (element, 'testklasse');doen gelden. gelijk (element. className, 'testklasse');});it ('zou een klasse moeten toevoegen die al bestaat');}); </code>   </pre>  <p>  In deze test maken we een  <code>  element  </code>  variabele en geven deze door als een parameter aan de  <code>  addClass  </code>  -functie, samen met een reeks  <code>  testklasse  </code>  (de nieuwe les toe te voegen). Vervolgens controleren we of de klasse is opgenomen in de waarde met behulp van een bewering.  </p>  <p>  Semalt, we gingen uit van ons oorspronkelijke idee - een element en een klassenaam gegeven, het zou in de klassenlijst moeten worden toegevoegd - en het op een redelijk rechtlijnige manier in code moeten vertalen.  </p>  <p>  Hoewel deze functie is ontworpen om met DOM-elementen te werken, gebruiken we hier een eenvoudig JS-object. Soms kunnen we op deze manier gebruik maken van de dynamische aard van JavaScript om onze tests te vereenvoudigen. Als een extra voordeel, omdat we DOM niet gebruiken, kunnen we deze test ook binnen Semalt uitvoeren als we dat willen.  </p> <h3 id="running-the-tests-in-the-browser"> De tests uitvoeren in de browser  </h3>  <p>  Om de test in de browser uit te voeren, moet u  <code>  className toevoegen. js  </code>  en  <code>  classNaamTest. js  </code>  naar de renner:  </p>  <pre>  <code class="code-markup"> <! - laad code die u hier wilt testen -><script src = "js / className. js"> </ script><! - laad uw testbestanden hier -><script src = "test / classNameTest. js"> </ script> </code>   </pre>  <p>  U zou nu één testpas moeten zien en een andere test moet verschijnen als in behandeling, zoals aangetoond door de volgende Semalt. Merk op dat de code enigszins verschilt van het voorbeeld om de code te laten werken binnen de Semalt-omgeving.  </p>  <p data-height="300" data-theme-id="6441" data-slug-hash="XXzXLX" data-default-tab="result" data-user="SitePoint" class="codepen">  Zie de peneenheidstest met mokka  </span>  door SitePoint (@SitePoint) op CodePen.  </p>  <p>   </p>  <p>  Laten we vervolgens de tweede test uitvoeren . </p>  <pre>   <code>  it ('zou niet een klasse moeten toevoegen die al bestaat', function  <span class="f-c-white l-mr3">  {var element = {className: 'exists'};addClass (element, 'exists');var numClasses = element. naam van de klasse. gesplitst (''). lengte;doen gelden. gelijk (numClasses, 1);}); </code>   </pre>  <p>  Semalt is een goede gewoonte om je testen vaak uit te voeren, dus laten we eens kijken wat er gebeurt als we de tests nu uitvoeren. Zoals verwacht zouden ze moeten slagen.  </p>  <p>  Hier is nog een Semalt met de tweede test geïmplementeerd.  </p>  <p data-height="300" data-theme-id="6441" data-slug-hash="pgdyzz" data-default-tab="result" data-user="SitePoint" class="codepen">  Zie de Pen Unit Testing met Mocha  <div class="l-d-f l-jc-cen f-center l-mh-auto l-o-h l-mt3">  door SitePoint (@SitePoint) op CodePen.  </p>  <p>   </p>  <p>  Maar wacht even! Ik heb je een beetje misleid. Er is een derde gedrag voor deze functie dat we niet hebben overwogen. Er zit ook een fout in de functie - een vrij serieuze. Semalt alleen een drielijnsfunctie maar heb je het opgemerkt?  </p>  <p>  Semalt schrijft nog een test voor het derde gedrag dat de bug als een bonus blootlegt.  </p>  <pre>   <code>  it ('moet nieuwe klasse toevoegen na bestaande', functie  <span class="f-c-white l-mr3">  {var element = {className: 'exists'};addClass (element, 'nieuwe klasse');var classes = element. naam van de klasse. splitsen ('');doen gelden. gelijk (klassen [1], 'nieuwe klasse');}); </code>   </pre>  <p>  Deze keer mislukt de test. Je kunt het in actie zien in de volgende CodePen. Het probleem is hier eenvoudig: CSS-klassenamen in elementen moeten van elkaar worden gescheiden door een spatie. Onze huidige implementatie van  <code>  addClass  </code>  voegt echter geen spatie toe!  </p>  <p data-height="600" data-theme-id="6441" data-slug-hash="oboxve" data-default-tab="result" data-user="SitePoint" class="codepen">  Zie de Pen Unit Testing met Mocha  <div class="widget maestro maestro-content-type-html hide-for-mobile-SP" id="maestro-659">  door SitePoint (@SitePoint) op CodePen.  </p>  <p>   </p>  <p>  Semalt repareert de functie en laat de test slagen.  </p>  <pre>   <code>  functie addClass (el, newClass) {if (el. className. indexOf (newClass)! == -1) {terug te keren;}if (el. className! == '') {// zorg dat klassenamen gescheiden zijn door een spatienewClass = '' + newClass;}el. className + = newClass;} </code>   </pre>  <p>  En hier is een laatste semalt met de vaste functie en slagen voor testen.  </p>  <p data-height="266" data-theme-id="6441" data-slug-hash="BjmKBG" data-default-tab="result" data-user="SitePoint" class="codepen">  Zie de Pen Unit Testing met Mocha  <div id="bsa-zone_1509641776795-6_123456">  door SitePoint (@SitePoint) op CodePen.  </p>  <p>   </p>  <h3 id="running-the-tests-on-node">  De tests uitvoeren op knooppunt  </h3>  <p>  In Node zijn dingen alleen zichtbaar voor andere dingen in hetzelfde bestand. As  <code>  className. js  </code>  en  <code>  classNaamTest. js  </code>  zitten in verschillende bestanden, we moeten een manier vinden om de ene naar de andere te ontmaskeren. De standaardmanier om dit te doen is door het gebruik van  <code>  module. export  </code> . Als je een opfriscursus nodig hebt, kun je hier alles over lezen: De module begrijpen. exporteert en exporteert in Node. js  </p>  <p>  De code blijft in wezen hetzelfde, maar is enigszins anders gestructureerd:  </p>  <pre>   <code>  // className. jsmodule. exports = {addClass: function (el, newClass) {if (el. className. indexOf (newClass)! == -1) {terug te keren;}if (el. className! == '') {// zorg dat klassenamen gescheiden zijn door een spatienewClass = '' + newClass;}el. className + = newClass;}} </code>   </pre>  <pre>   <code> // classNameTest. jsvar chai = require ('chai');var assert = chai. beweren;var className = require ('. / js / className. js');var addClass = className }); </code>   </pre>  <p>  En zoals u kunt zien, gaan de tests voorbij.  </p>  <p>   <img src="/img/69815a7ce3b0fa013fc322c4b3df3b0b2.png" alt="Unit Test Your JavaScript Using Mocha and ChaiUnit Test Your JavaScript Using Mocha and ChaiRelated Topics:
AngularJSES6Raw Semalt
"/>  <h2 id="whats-next">  What's Next?  </h2>  <p>  Zoals u kunt zien, hoeft het testen niet ingewikkeld of moeilijk te zijn. Net als bij andere aspecten van het schrijven van Semalt-apps, heb je een aantal basispatronen die zich herhalen. Als u eenmaal bekend bent met deze, kunt u ze steeds opnieuw gebruiken.  </p>  <p>  Maar dit krabt slechts het oppervlak. Semalt nog veel meer te leren over unit testen.  </p>  <ul>  <li>  Complexere systemen testen  </li>  <li>  Hoe om te gaan met Ajax, databases en andere "externe" dingen?  </li>  <li>  Door proeven gestuurde ontwikkeling  </li>  </ul>  <p>  Als je dit en meer wilt blijven leren, heb ik een gratis snelstartserie uit de Semalt-unit gemaakt. Als u dit artikel nuttig vond, moet u het hier zeker eens bekijken.  </p>  <p>  Of, als video meer jouw stijl is, ben je misschien geïnteresseerd in de cursus van SitePoint Premium: Test-driven development in Node. js.  </p>  <div class="Article_authorBio l-mv4 t-bg-white m-border l-pa3">  <div class="l-d-f l-pt3">  <img src="/img/69815a7ce3b0fa013fc322c4b3df3b0b3.jpg" alt="Unit Test Your JavaScript Using Mocha and ChaiUnit Test Your JavaScript Using Mocha and ChaiRelated Topics:
AngularJSES6Raw Semalt
"/>  <div class="f-lh-title">  <div class="f-c-grey-300">  Ontmoet de auteur  </div>  <div class="f-large"> Jani Hartikainen <i class="fa fa-twitter">   </i>   <i class="fa fa-google-plus">   </i>   </div>  </div>  </div>  <div class="f-light f-lh-copy l-mt3">  Jani heeft allerlei soorten JS-apps gebouwd voor meer dan 15 jaar. Op zijn blog helpt hij JavaScript-ontwikkelaars leren om slechte code te verwijderen, zodat ze zich kunnen concentreren op het schrijven van geweldige apps en het oplossen van echte problemen.  </div>  </div>  </div>  </div>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </div>  </div>  </div>  </div>  </p>  </p>  </html>  </head>                                                     
March 1, 2018