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可以正常工作，但我想知道是否有为此目的使用酶或react test渲染器的方法（我不喜欢使用多个库来渲染测试不同的功能）。

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

Answer 1

尝试使用ref.current.getDomNode()。

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

1 个答案: