笑话：如何测试一个组件是不是具有某个 ref 属性？

Posted 2023-02-25

【中文标题】笑话：如何测试一个组件是不是具有某个 ref 属性？

【英文标题】：Jest: How to test that a component has a certain ref attribute?笑话：如何测试一个组件是否具有某个 ref 属性？

【发布时间】：2021-06-23 13:24:05

【问题描述】：

JSX

const MyComp = ( myDOMElRef ) => <div id="x" ref= myDOMElRef  />

测试

const mockedElRef = 'whatever';
// ... set up stuff
instance=shallow(<MyComp ref= mockedElRef  />
expect(instance).toHaveProp('ref', mockedElRef);

Ref 是一个特殊的道具，因此测试失败。 如何检查 id 为 x 的 div 是否已将 ref 传入 MyComp？

【参考方案1】：

反应 16+

const domElement = instance.get(0);
expect(domElement.ref).toBe(mockedElRef);

注意：在 React 15 之前，可以在从 shallow() 返回的包装器上使用 instance() 而不是 get(0)。