2016-05-18 9 views
4

Ich verwende React für Render und Jest/Jasmine für Test. Ich habe Test geschrieben mit alten Jest/Jasmine waitsFor und runs aber diese sind jetzt in Jasmine 2 und ich bin mir nicht sicher, wie man mit neuen done asyncs ersetzen.Wie verwende ich Jest zum Testen reagierte gerenderte asynchrone Daten?

In meinem Code gibt React eine kleine Seite über einen Benutzer aus. Diese Seite hat einen AJAX-Aufruf, um Benutzerposts abzurufen. Ich möchte testen, dass Benutzer Beiträge wieder schön kommen, und waitsFor war sehr, sehr gut in diesem: warten, bis der Benutzer einige Post hat, dann weiter.

Ich schaute online auf viele Leute, die über die Verwendung von AJAX-Anrufe innerhalb Jest Test sprechen, was nicht das ist, was ich will. Mein Jest-Test hat keine Ahnung, wie ein AJAX-Anruf zustande kommt, also muss ich warten, bis die Ergebnisse zurückkommen.

Hier ist meine aktuellen Code mit waitsFor und runs:

it('loads user post',() => { 
    var page = TestUtils.renderIntoDocument(
     <UserPage params={{user: 'fizzbuzz', 'pass': 'xxx'}} /> 
    ); 

    waitsFor(() => { 
     return page.state.posts.length > 0; 
    }, "post loaded", 10000); 

    runs(() => { 
     var posts = TestUtils.scryRenderedDOMComponentsWithClass(page, 'post'); 
     expect(posts.length).toEqual(10); 
    }); 
}); 

Wie kann ich die waitsFor und runs löschen und mit Jasmin 2.0-Code ersetzen, das funktioniert? Alle Jest-Test wissen, dass page.state.posts.length größer als 0 sein muss, bevor expect irgendwas.

Antwort

2

Sie sollten diesen Test in zwei Komponententests umgestalten, die eine strengere Prüfung Ihres Codes ermöglichen. Es würde die Tests unabhängiger von einander machen und Fehler in einem verfeinerten Umfang identifizieren. Diese werden nicht genau sein, wie ich weiß nicht, was Ihr Code ist wie, aber hier ist etwas entlang der Linien ich erwarten würde, um zu sehen: -

it('generates the expected properties for a page', function() { 
    var page = TestUtils.renderIntoDocument(
     <UserPage params={{user: 'fizzbuzz', 'pass': 'xxx'}} /> 
    ); 

    expect(page.someProperty).toBeDefined(); 
    expect(page.user).toEqual('fizzbuzz'); 
}); 

it('generates the correct number of posts from a given page object', function() { 
    var fakePage = { 
     // put your fake mock data here that TestUtils expects 
    }; 

    var posts = TestUtils.scryRenderedDOMComponentsWithClass(fakePage, 'post'); 

    expect(posts.length).toEqual(10); 
}); 

Ich bin nicht ganz sicher, was in Ihrer renderIntoDocument Funktion geschieht so Der Top-Test ist möglicherweise etwas kaputt ... Es sieht so aus, als ob entweder zu viel in der Funktion vor sich geht, oder Sie müssen stattdessen die Aufrufe testen, die die Funktion ausführt. Wenn Sie näher erläutern, was es tut, werde ich die Antwort bearbeiten.

+0

Entschuldigung für meine langsame Rückkehr! Vielen Dank! Ich habe eine Upvote hinzugefügt, weil ich denke, dass Sie in die richtige Richtung sind. renderIntoDocument ist kein eigener Code, sondern Code von React. Es macht meine React-Komponenten so, als wären sie echt gemacht. Render in React bewirkt, dass Ajax passiert und ich versuche sicherzustellen, dass der Ajax korrekt abgeschlossen wurde. Das war im alten Jasmine möglich, weil Ajax die interne React-Komponente vervollständigen konnte und ich den Wert im Test überprüfe. Aber in Jasmine 2 bisher nicht möglich. – FizzBuzz

+0

@FizzBuzz keine Sorgen - vielen Dank für die Rückkehr zu mir! Ich sehe, offensichtlich ein wenig im Dunkeln mit React im Moment. Wenn es sich jedoch um eine native React-Funktion handelt, würde ich davon abraten, diese Logik zu testen, da sie bereits von den Entwicklern, die diese Funktion schreiben, getestet werden sollte (dh Autoren reaktivieren) - bleibe dabei, deine eigene Logik jenseits (vor und nach) dieser Funktion zu testen , anstatt ihre Funktionalität direkt zu testen. Das würde ich sowieso empfehlen. Entschuldigung, wenn ich das aber falsch verstanden habe - wie gesagt, noch nicht auf React gekommen bin. – Shakespeare

Verwandte Themen