Можно ли использовать реактивную виртуализацию и фермент вместе? Когда я пытаюсь использовать их вместе, я получаю пустой список элементов в сетке.
Работает ли react-virtualized с airbnb/enzyme?
Ответы (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>
)
}
getBoundingClientRect
и getComputedStyle
. Вы можете увидеть, как он измеряет вещи, здесь: github .com/bvaughn/react-virtualized/blob/master/source/
- person bvaughn; 15.06.2016
height
и width
(параметры обратного вызова рендеринга AutoSizer) в MyComponent?
- person Alfonso Pérez; 15.11.2017
начиная с реактивной виртуализации 9.12.0 Autosizer имеет свойства defaultWidth
и defaultHeight
. Я обнаружил, что эти настройки означают, что ферментные тесты выполняются правильно - дочерние строки отображаются, как и ожидалось.
<AutoSizer disableHeight defaultWidth={100}>
{({ width }) => (
....
)}
</AutoSizer>
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
было просто извлечено из исходного кода) и может дать вам ложные срабатывания.
jest.mock('react-virtualized-auto-sizer', () => { return mockAutoSizer; });
где mockAutoSizer — функция, которую вы только что описали.
- person NotSimon; 23.07.2020