Как проверить переадресованный реф в React с помощью тестового рендерера или энзима? - PullRequest
Новая
       35

Как проверить переадресованный реф в React с помощью тестового рендерера или энзима?

0 голосов
/ 18 октября 2018

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

Основная причина, по которой я хочу проверить ссылки, заключается в том, что, если ссылка изменится на другой элемент в компоненте, все анимации, использующие ссылку компонента, будут прерваны.Итак, я хочу указать, к каким элементам осуществляется доступ при использовании ссылок.

...