Testing Komponente mit reagieren-Router v4, Jest und Enzyme

Question

ich eine einfache Komponente, die reagieren-Router verwendet (ich bin mir bewusst, das ist die Alpha-Version):

{props.app && props.app.health && 
    <Match exactly pattern="/" component={HomeLogin} /> 
} 

Die docs Verpackung empfiehlt <MemoryRouter /> zu Bereitstellen von Kontext für Komponenten beim Testen.

jedoch mit Jest/Enzym bin ich shallow() nicht in der Lage machen - ich muss Enzyme des mount() oder render(), was zu Problemen führt, weil HomeLogin eine angeschlossene Komponente ist - ich möchte in der Lage zu testen, dass meine Komponente die rendert Richtig, aber nicht Testen Sie die Komponente gerendert darin.

Mein Test:

it('Renders based upon matched route',() => { 
    let props = { 
    app: { health: true }, 
    }; 
    const component = render(
    <Provider store={store}> 
     <MemoryRouter location="/"> 
     <Jumbotron {...props} /> 
     </MemoryRouter> 
    </Provider> 
); 
    expect(toJson(component)).toMatchSnapshot(); 
}); 

Wie kann ich die Ausgabe dieser Komponente testen auf der Strecke basiert, ohne die redux Speicher zu schaffen, oder machen mit flachem?

Update: Wenn ich versuche, shallow() zu verwenden, rendert der Snapshot keine Ausgabe.

Answer 1

können Sie .find(Jumbotron) verwenden und verwenden, die als Snapshot zur Anpassung, zum Beispiel:

const wrapped = component.find(Jumbotron); 
expect(toJson(wrapped)).toMatchSnapshot(); 

Ich hatte ein komplexeres Beispiel beteiligt withRouter() und ich war die Wiederherstellung aller Schlüssel von dem Ausgang zu entfernen, bevor sie als Momentaufnahme entspricht. Nun, bis zum Testen auf React-Router wird V4 fester mit Jest und Snapshot-Tests. Beispiel:

export function removeKeys(object) { 
    if (object === undefined || object === null) { 
     return object; 
    } 
    Object.keys(object).forEach((key) => { 
     if (typeof object[key] === 'object') { 
      removeKeys(object[key]); 
     } else if (key === 'key') { 
      delete object[key]; 
     } 
    }); 
    return object; 
} 

... 

expect(removeKeys(toJson(component))).toMatchSnapshot();