如何使用测试渲染器或酶在React中测试转发的引用？

Question

我在应用程序中使用了一些动画，所有动画都取决于引用（我正在使用GSAP）。大多数测试元素位于其他React组件中；因此，我在组件中设置了forwardRef以便将ref传递给所需的元素。

现在，我想使用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渲染和测试ref可以正常工作，但我想知道是否为此目的使用酶或反应测试渲染器（我不喜欢使用多个库进行渲染测试）不同的功能）。

我要测试参考的主要原因是，如果参考更改为组件中的另一个元素，则使用该组件的参考的所有动画都会中断。因此，我想指定使用引用时要访问哪些元素。

Answer 1

也许您应该使用ref.current.getDomNode()。