Reagiert-virtualisierte Arbeit mit Airbnb/Enzym?

Question

Ist es möglich, reaktionsvirtualisiert und Enzym zusammen zu verwenden? Wenn ich versuche, sie zusammen zu verwenden, bekomme ich anscheinend eine leere Liste von Gegenständen im Raster.

Answer 1

Die 2 sollte ja zusammen funktionieren. Ich glaube, dass das wahrscheinliche Problem darin besteht, dass der reaktivierten Komponente eine Breite oder Höhe von 0 gegeben wird, was dazu führt, dass nichts gerendert wird. (Es rendert nur genug, um das "Fenster" zu füllen, das es hat.)

Angenommen, Sie verwenden den AutoSizer HOC- (die meisten Leute tun) - dann ein Muster, das ich hilfreich gefunden habe ist, exportieren Sie 2 Versionen von Komponenten- eine, die explizite width/height-Eigenschaften erwartet und eine, die die andere mit einem AutoSizer umschließt. Pseudo-Code wäre:

import { AutoSizer, VirtualScroll } from 'react-virtualized' 

// Use this component for testing purposes so you can explicitly set width/height 
export function MyComponent ({ 
    height, 
    width, 
    ...otherProps 
}) { 
    return (
    <VirtualScroll 
     height={height} 
     width={width} 
     {...otherProps} 
    /> 
) 
} 

// Use this component in your browser where auto-sizing behavior is desired 
export default function MyAutoSizedComponent (props) { 
    return (
    <AutoSizer> 
     ({ height, width }) => (
     <MyComponent 
      height={height} 
      width={width} 
      {...props} 
     /> 
    ) 
    </AutoSizer> 
) 
} 

Answer 2

Putting in meinem Testfall für mich gearbeitet:

import { AutoSizer } from 'react-virtualized'; 

// ... 

it('should do something', function() { 
    spyOn(AutoSizer.prototype, 'render').and.callFake(function render() { 
     return (
      <div ref={this._setRef}> 
       {this.props.children({ width: 200, height: 100 })} 
      </div> 
     ); 
    }); 

    // do something... 

Ich benutze Jasmins spyOn hier, aber auch andere Bibliotheken haben ihre eigene Art von Funktionen zu überschreiben. Beachten Sie, dass dies gegen zukünftige Änderungen an der reaktivierten virtualisierten Bibliothek (this._setRef wurde gerade aus dem Quellcode gezogen) ziemlich anfällig ist, und Sie möglicherweise falsche Positive geben.

Answer 3

ab dem reaktivierten 9.12.0 hat der Autosizer defaultWidth und defaultHeight Eigenschaften. Ich fand Einstellungen, die dazu führten, dass Enzymtests korrekt ausgeführt wurden - Rendering der untergeordneten Zeilen wie erwartet.

<AutoSizer disableHeight defaultWidth={100}> 
    {({ width }) => (
    .... 
)} 
</AutoSizer>