Testing reagieren Komponente in withRouter eingeschlossen (vorzugsweise unter Verwendung von Scherz/Enzym)

Question

Ich habe eine Komponente reagieren, die innerhalb höherer Ordnung Komponente withRouter wie unten eingeschlossen ist:

module.exports = withRouter(ManageProfilePage); 

Meine Strecken sind wie folgt:

<Route path="/" component={AdrApp}> 
    <IndexRoute component={Login}/> 
    <Route component={CheckLoginStatus}> 
     <Route path="manage-profiles/:profileId" component= 
     {ManageProfilesPage}/> 
    </Route> 
    <Route path="*" component={notFoundPage}/> 
</Route> 

ich einmal der Router Lifecycle-Methoden verwenden müssen, ist das, warum ich withRouter brauchen:

class ManageProfilePage extends React.Component { 
    componentDidMount() { 
    this.props.router.setRouteLeaveHook(this.props.route,() => { 
     ... 
    }) 
    render(){ 
    ... 
    } 
} 

Ich brauche diese Komponente Jest/Enzyme zu testen, und ich schrieb den Testfall wie folgt:

describe('manage profile page test suite',() => { 


    it('snapshot test',() => { 

     const setRouteLeaveHook =jest.fn(); 

     let wrapper = shallow(
      <ManageProfilePage params={{id : 25, router: 
     setRouteLeaveHook}}/> 
     ); 
     expect(wrapper).toMatchSnapshot(); 
    }) 
    }) 

Die Frage ist es nicht eine Ebene tief rendert. Ich bin Einfügen den Schnappschuss unter:

exports[`manage drug term page test suites snapshot test 1`] = ` 
<ManageProfilePage 
    params={ 
    Object { 
     "id": 25, 
     "router": [Function], 
    } 
    } 
/> 
`; 

Gibt es eine andere Art und Weise ich meinen Testfall schreiben kann, so dass ich in der Lage bin ManageProfilePage atleast 1 Ebene tief zu machen? Es kann nicht gerendert werden, da es in WithRouter eingeschlossen ist. Wie testen wir diese Art von Komponenten?

Answer 1

Normalerweise, wenn wir versuchen, solche Komponenten zu testen, werden wir nicht in der Lage sein, es zu machen, wie es in WithRouter gewickelt ist (WithRouter ist ein Wrapper über eine Komponente, die Router Requisiten wie Spiel, Route und Geschichte liefert direkt verwendet werden innerhalb der Komponente). module.exports = withRouter (ManageProfilePage);

Um solche Komponenten zu rendern, müssen wir explizit angeben, dass die umbrochene Komponente mit dem Schlüsselwort WrappedComponent gerendert werden soll. Für zB. wir werden unter Code für Snapshot-Test verwenden:

describe('manage profile page test suite',() => { 


    it('snapshot test',() => { 

     const setRouteLeaveHook =jest.fn(); 

     let wrapper = shallow(
      <ManageProfilePage.WrappedComponent params={{id : 25, router: 
     setRouteLeaveHook}}/> 
     ); 
     expect(wrapper).toMatchSnapshot(); 
    }) 
    }) 

Dieses Enzym sagen wird flach Rendering (Shallow Rendering macht nur diese bestimmte Komponente und überspringt Kind-Komponenten) für ManageProfilePage zu tun, die Komponente innerhalb WithRouter gewickelt ist.

Answer 2

Flaches Rendering wird nur eine Ebene rendern, das ist Teil der Spezifikationen dafür.

Sie können Mount verwenden, die den gesamten Baum rendern wird, aber ich glaube nicht, dass Sie begrenzen können, wie viele Ebenen tief es rendern wird.

In jedem Fall, wenn ich High-Order-Komponenten verwende, exportiere ich normalerweise auch die Basiskomponente (vor dem Einpacken), so kann ich alle meine Tests ohne den Wrapper machen und einfach Mocks für die benötigten Provider übergeben.

gleiche Sache mit einer Connect Komponente mit Redux, exportieren Sie Ihre normale Komponente und testen Sie die verschiedenen Requisiten auf, anstatt der angeschlossenen.

auch beachten Sie, dass einige with... Wrapper die innere Instanz nicht freilegen (einige tun, aber einige nicht), so dass Tests auf Ihrer eigenen Komponente anstelle des Wrappers hilft auch.

Answer 3

Was ich tat, was das Problem behoben:

In „this.props.match.params.id“ist die Post-Komponente

Im Testfall verwendet

 
const miniProps = { 
    otherProps, 
    match:{params:{id:'112'}} 
}; 

const wrapper = shallow();