2

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

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
4

1 回答 1

2

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

你的测试与你的软件使用方式越相似，它们能给你的信心就越大

您在此处测试的内容不符合您希望用户与之交互的内容。相反，您应该专注于您试图从 ref 中实现的目标。例如，样式、数据等，

于 2021-07-21T10:07:52.947 回答