Wie teste ich React-Responsive Komponenten mit Enzyme?

Question

Ich benutze die Bibliothek React-Reponsive. https://github.com/contra/react-responsive

Ich kämpfe, um herauszufinden, wie die Komponenten zu testen, die in React-Responsive Medien Abfragekomponenten verschachtelt sind:

export default class AppContainer extends React.Component { 
    render(){ 
    return(
     <MediaQuery minDeviceWidth={750}> 
     <Header /> 
     </MediaQuery> 
    ); 
    } 
} 

-

describe("AppContainer",() => { 
    let App; 
    let wrapper; 
    beforeEach(() => { 
    wrapper = mount(<Provider store={store}><AppContainer location={location} /></Provider>); 
    App = wrapper.find(AppContainer); 

    }); 
    it('to have a <Header /> component',() => { 
    console.log(App.debug()); 
    expect(App.find(Header)).to.have.length(1); 
    }); 
} 

Das Testergebnis:

1) AppContainer to have a <Header /> component: 
AssertionError: expected { Object (component, root, ...) } to have a length of 1 but got 0 

Der relevante Teil des Ausgangs der console.log ist:

<MediaQuery minDeviceWidth={750} values={{...}} /> 

Zeigt an, dass Header tatsächlich nicht in der Render-Struktur angezeigt wird. Wenn ich jedoch die MediaQuery entferne und Header zu einem direkten Kind von AppContainer mache, wird der Test bestanden.

Ich kann mir vorstellen, dass dies kein Fehler ist, da ich Enzyme und Testkomponenten im Allgemeinen sehr neu bin. Jede Hilfe oder Beispiele wären willkommen.

Bitte beachten Sie: Die anderen Tests, die ich an dieser Komponente habe, sind in Ordnung. Ich bin zuversichtlich, dass die Importe und das Setup alle korrekt sind.

Answer 1

Problem war, dass Media Query nach window.matchMedia sucht, die mit jsdom nicht definiert ist.

In diesem Fall musste ich die Server Side Rendering-Implementierung verwenden. Dies würde jedoch einen statischen Wert für die Breite erfordern, was die Reaktionsfähigkeit unterbricht.

Meine Lösung besteht darin, eine globale Variable auf dem virtuellen Test-DOM zu setzen.

window.testMediaQueryValues = {width:740}; 

Dann MediaQuery auf sie zugreifen kann, wenn sie da sind:

<MediaQuery maxWidth={smallViewMaxWidth} values={window.testMediaQueryValues}> 

In dem Fall, wenn die Variable nicht gesetzt ist, werden die Nullwerte ignoriert und die Komponente macht wie üblich.

Big dank @Contra für seine Hilfe und Super-Bibliothek

Answer 2

Versuchen Sie, die reagieren reagierenden Abhängigkeit in Ihrem Unit-Test verspotten. Bei der Arbeit mit Webpack verwende ich inject-loader, um Testabhängigkeiten in Module zu injizieren. Sie können Ihre Komponente mit "inject-loader" importieren und übergeben, welche Abhängigkeiten Sie überschreiben möchten.

Beispiel:

import YourComponentInjector from 'inject-loader!../YourComponent.jsx'; 

und dann

class MediaQueryDesktopMock extends React.Component { 
    render() { 
     const {minDeviceWidth, children} = this.props; 
     if(minDeviceWidth === 765) { 
     return (<div>{children}</div>) 
     } 
     return <span/>; 
    } 
    } 
    let YourComponentMock = YourComponentInjector({ 
    'react-responsive': MediaQueryDesktopMock 
    }); 

Sie können dann Test für bestimmte Medien fragt