Как проверить переадресованный реф в React с помощью тестового рендерера или фермента?
Я использую некоторое количество анимаций в своем приложении, и все анимации зависят от ссылок (я использую GSAP). Большинство протестированных элементов находятся в других компонентах React; Итак, я настроил forwardRef в моих компонентах, чтобы передать ссылку на необходимые элементы.
Теперь я хочу протестировать эти ссылки с помощью Jest и Enzyme или React Test Renderer, но мне не удалось добиться этого с обеими библиотеками. Вот моя текущая реализация:
it('passes refs to the container component', () => {
const ref = React.createRef();
const div = document.createElement('div');
ReactDOM.render(<Row ref={ref} />, div);
const element = div.querySelector('div');
expect(element).toBe(ref.current);
});
С помощью ReactTestRenderer.create или же enzyme.render сделать полный рендеринг не работает, потому что ссылки пусты. Затем я нашел enzyme.mount функция, которая делает что-то похожее на ReactDOM.render; Итак, решил использовать это:
it('passes refs to the container component', () => {
const ref = React.createRef();
const wrapper = mount(<Row ref={ref} />);
const div = wrapper.find('div').first().getDOMNode();
expect(div).toBe(ref.current);
});
Этот тест не проходит, потому что по какой-то причине div возвращает HTMLElement пока ref.current вернуть что-то с именем WrapperComponent вместо возврата перенаправленного элемента.
Создание элемента и использование ReactDOM для рендеринга и проверки работоспособности отлично работает, но я хотел бы знать, есть ли способ использовать энзим или реагирующий тестовый рендеринг для этой цели (я не фанат использования нескольких библиотек для рендеринга для тестирования различных функциональных возможностей).
Основная причина, по которой я хочу протестировать ссылки, заключается в том, что если ссылка изменится на другой элемент в компоненте, все анимации, использующие ссылку компонента, прервутся. Итак, я хочу указать, какие элементы доступны при использовании ссылок.