Wie Komponententest React Component sollteComponentUpdate Methode

Question

Ich habe eine React Component, die die shouldComponentUpdate Methode implementiert und ich möchte Einheit testen. Im Idealfall könnte ich in einem Komponententest einige Props oder Zustände auf der Komponente ändern und überprüfen, ob sie entweder neu gerendert wurden oder nicht. Ich benutze enzyme, wenn das hilft.

Answer 1

Ich würde wahrscheinlich einfach sollteComponentUpdate direkt aufrufen.

So etwas wie

const comp = shallow(<Comp {...props} />) 
const shouldUpdate = comp.instance().shouldComponentUpdate(nextProps, nextState) 
expect(shouldUpdate).toBe(true/false) 

durch die Bestimmung zu testen, versuchen herauszufinden, ob die Komponente tatsächlich erbrachten/render nicht wahrscheinlich mehr Mühe, als es wert ist; Ich bin mir nicht einmal sicher, wie du das mit Enzymen machen würdest. Sie können die gerenderte Ausgabe nicht wirklich verlassen, da Sie wahrscheinlich von falseComponentUpdate nicht false zurückgeben würden, es sei denn, die gerenderte Ausgabe wäre die gleiche wie zuvor. Das Bestimmen, ob ein Rendering stattgefunden hat oder nicht, kann nicht allein durch die Ausgabe erfolgen.

Testen durch direktes Anrufen scheint mir aber in Ordnung. Solange Sie vertrauen, dass React den Rückgabewert von shouldComponentUpdate korrekt verwendet (wir haben größere Probleme, wenn dies nicht der Fall ist), ist es sicher.

Answer 2

Ich denke, Sie sollten nichts für Komponententests machen und deshalb brauchen Sie kein Enzym für Komponententests.

Ein schnelles Testbeispiel für Ihren Fall.

const classContext = { 
    props: {}, 
    state: {} 
}; 
const nextProps = {}; 
const nextState = {}; 

const shouldUpdate = yourComponent.prototype.shouldComponentUpdate.call(classContext, nextProps, nextState); 

expect(shouldUpdate).toBe(true/false)