Neue Kompilierungsfehler mit react-addons-test-utils

Question

Aktualisierung auf die neusten .d.ts-Definitionen für react-addons-test-utils hat die Kompilierung für unseren Testcode durchbrochen. In dieser Funktion:

import * as TestUtils from 'react-addons-test-utils'; 
import MyReactComponent from 'blabla' 

let buildComponent =() => { 
    const root = TestUtils.renderIntoDocument(<MyReactComponent/>); 
    return TestUtils.findRenderedComponentWithType(root, MyReactComponent); 
} 

Passing root zur letzten Funktion hier verursacht error TS2345: Argument of type 'Component<any, {}> | Element | void' is not assignable to parameter of type 'Component<any, any>'.

Fein, kann ich Stimmen:

let buildComponent =() => { 
    const root = TestUtils.renderIntoDocument(<MyReactComponent/>); 
    return TestUtils.findRenderedComponentWithType(root as React.Component<any, any>, MyReactComponent); 
} 

Aber jetzt MyReactComponent auf der letzten Linie, die bewirkt, dass error TS2345: Argument of type 'typeof MyReactComponent' is not assignable to parameter of type 'ComponentClass<{}> & (new() => MyReactComponent) & (new() => { props: any; })'.

Anscheinend erwartet es eine ClassType<any, T, C> wo C extends ComponentClass<{}>, und so mehow meine passt nicht die Rechnung, aber wie, verstehe ich nicht.

Answer 1

nicht zuordenbare Parameter des Typs 'Komponente'

Das bedeutet, dass rootReact.Component<any,any> vom Typ sein sollte. Dies bedeutet, dass die Signatur TestUtils.renderIntoDocument wahrscheinlich falsch ist.

Hack:

import * as TestUtils from 'react-addons-test-utils'; 
import MyReactComponent from 'blabla' 

let buildComponent =() => { 
    const root: React.Component<any, any> = TestUtils.renderIntoDocument(<MyReactComponent/>) as any; 
    return TestUtils.findRenderedComponentWithType(root, MyReactComponent); 
} 

Weitere

Notiere die Verwendung von any benötigt wird, da es keine einfache strukturelle Beziehung zwischen dem Rückgabewert ist und die gewünschten Rückgabewert. Einzelheiten finden Sie unter https://basarat.gitbooks.io/typescript/content/docs/types/type-assertion.html.

Answer 2

das gleiche Problem hatte, half folgende:

TestUtils.findRenderedComponentWithType(root as React.Component<any, any>, MyReactComponent as any); 

Answer 3

die Bruchänderung und die Fluidität der beiden Dateien Reagieren und der Definition, könnten wir es ein wenig Hilfe geben (und vielleicht auch Korrekturen an zukünftige Änderungen vereinfachen) durch Abstrahieren der Verwendung der 3rd-Party-Methoden unter explizit typisierten Helfern. Wir verlieren einen Teil der „Flexibilität“ in den aktuellen Definitionen, aber wenn wir den Rückgabetyp von renderIntoDocument und die Parametertypen für findRenderedComponentWithType (zum Beispiel) wissen , könnten wir Wrapper definieren wie folgt:

function renderIntoDocument (reactEl: React.ReactElement<{}>) { 
    return TestUtils.renderIntoDocument(reactEl) as React.Component<{}, {}> 
} 

function findRenderedComponentWithType(root: React.Component<{}, {}>, type: React.ComponentClass<{}>): React.Component<{}, {}> { 
    return TestUtils.findRenderedComponentWithType(root, type as any) 
} 

let buildComponent =() => { 
    const root = renderIntoDocument(<MyReactComponent/>); 
    return findRenderedComponentWithType(root, MyReactComponent); 
}