如何测试我的输入是否具有 ref 属性？

Question

我正在使用 React 测试库，并且我有一个组件接收将在 <input />.

中使用的 ref 的 prop 值

const InputComp = (ref) => <Input data-testid="test-input" ref={ref} />

然后我将一个简单的 useRef() 传递到此组件中，形成父组件，例如

const SomeParent = () => {

    const myRef = useRef();

    return <InputComp ref={myRef} />
}

我现在的问题是，我如何测试我可以传入一个 ref 并且它会出现在 InputComp 中？

我尝试了以下操作：

it('Should render with a ref', () => {
    const testRef = createRef();

    const rendered = render(<InputComp ref={testRef} />);

    expect(rendered.getByTestId('test-input')).toHaveAttribute(testRef)
    expect(rendered.getByTestId('test-input').getAttribute('ref')).toBe(testRef);
});

这两个断言都失败了，原因如下：

Expected the element to have attribute:
   {"current": <input data-testid="test-input" />}
Received:
   null

Answer 1

'ref' 属性不会流向 DOM。此外，react-testing-library 的整个指导原则是： (https://testing-library.com/docs/guiding-principles/)

The more your tests resemble the way your software is used, the more confidence they can give you

您在此处测试的内容不符合您希望用户与之交互的内容。相反，你应该专注于你想从 ref 中获得什么。例如样式、数据等

如何测试我的输入是否具有 ref 属性？

How to test that my input has a ref attribute?

reactjs

react-testing-library

use-ref

testing-library