Работает ли react-virtualized с airbnb/enzyme?

Можно ли использовать реактивную виртуализацию и фермент вместе? Когда я пытаюсь использовать их вместе, я получаю пустой список элементов в сетке.


person camwest    schedule 14.06.2016    source источник
comment
Вы уверены, что передаете ширину и высоту › 0 в сетку? (Есть ли шанс, что вы могли бы поделиться кодом?)   -  person bvaughn    schedule 14.06.2016
comment
Позвольте мне сделать упрощенный пример.   -  person camwest    schedule 14.06.2016
comment
Я думаю, проблема в том, что я использую Autosizer. Буду продолжать расследование...   -  person camwest    schedule 14.06.2016
comment
Без проблем. Я добавлю ответ, чтобы отформатировать пример кода.   -  person bvaughn    schedule 15.06.2016


Ответы (3)


2 должны работать вместе, да. Я полагаю, что вероятная проблема заключается в том, что компоненту, виртуализируемому реакцией, присваивается ширина или высота 0, что приводит к тому, что он ничего не отображает. (Его рендеринга достаточно, чтобы заполнить имеющееся у него «окно».)

Предполагая, что вы используете AutoSizer HOC (большинство людей так и делает), тогда один шаблон, который я нашел полезным, заключается в экспорте 2 версий компонентов: одна, которая ожидает явных свойств ширины/высоты, и одна, которая оборачивает другую с помощью AutoSizer. Псевдокод будет:

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>
  )
}
person bvaughn    schedule 14.06.2016
comment
Я забыл упомянуть одну вещь. Я использую фермент в node.js, используя jsdom. Полагается ли AutoSizer на реальный API измерения DOM? - person camwest; 15.06.2016
comment
Это зависит от getBoundingClientRect и getComputedStyle. Вы можете увидеть, как он измеряет вещи, здесь: github .com/bvaughn/react-virtualized/blob/master/source/ - person bvaughn; 15.06.2016
comment
Хорошо, отлично, тогда ваша рекомендация об обходе AutoResizer является лучшей, поскольку getBoundingClientRect не точен в jsdom. - person camwest; 17.06.2016
comment
Разве вы не должны передавать height и width (параметры обратного вызова рендеринга AutoSizer) в MyComponent? - person Alfonso Pérez; 15.11.2017
comment
Ага. Пример был просто написан быстро как набросок. Я обновил его. - person bvaughn; 16.11.2017
comment
Вы спасатель жизни! ‹3 - person Anders Ekman; 16.01.2019

начиная с реактивной виртуализации 9.12.0 Autosizer имеет свойства defaultWidth и defaultHeight. Я обнаружил, что эти настройки означают, что ферментные тесты выполняются правильно - дочерние строки отображаются, как и ожидалось.

<AutoSizer disableHeight defaultWidth={100}>
    {({ width }) => (
  ....
  )}
</AutoSizer>
person Rob Clayburn    schedule 20.11.2017
comment
Спасибо большое! Я не мог понять, почему console.log(wrapper.debug()); не показывал никаких данных для строк — показывались только заголовки. - person Shiraz; 09.08.2020

Включение этого в мой тестовый пример сработало для меня:

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, но в других библиотеках есть свои способы перезаписи функций. Имейте в виду, что это довольно уязвимо для будущих изменений в реагирующей виртуализированной библиотеке (this._setRef было просто извлечено из исходного кода) и может дать вам ложные срабатывания.

person Chris    schedule 16.12.2016
comment
Сделал это в шутку так: jest.mock('react-virtualized-auto-sizer', () => { return mockAutoSizer; }); где mockAutoSizer — функция, которую вы только что описали. - person NotSimon; 23.07.2020