react-virtualized - 反応仮想化は airbnb/enzyme で機能しますか?

Question

反応仮想化と酵素を一緒に使用することは可能ですか? それらを一緒に使用しようとすると、グリッド内のアイテムの空のリストが表示されるようです。

Answer 1

はい、2つは一緒に動作するはずです。おそらく問題は、react-virtualized コンポーネントの幅または高さが 0 に設定されているため、何もレンダリングされないことだと思います。(「ウィンドウ」を埋めるのに十分なだけレンダリングします。)

AutoSizer HOC を使用していると仮定すると (ほとんどの人がそうしています)、私が見つけたパターンの 1 つは、コンポーネントの 2 つのバージョンをエクスポートすることです。擬似コードは次のようになります。

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

react-virtualized 9.12.0 の時点で、Autosizer にはdefaultWidthとdefaultHeightプロパティがあります。これらを設定すると、酵素テストが正しく実行され、子行が期待どおりにレンダリングされることがわかりました。

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

Answer 3

これをテストケースに入れるとうまくいきました：

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...

ここでは Jasmine の spyOn を使用しますが、他のライブラリには関数を上書きする独自の方法があります。これは、react-virtualized ライブラリ (ソース コードからヤンクされたばかり) に対する将来の変更に対して非常に脆弱でthis._setRefあり、誤検出を引き起こす可能性があることに注意してください。