如何使用反应酶检查实际的 DOM 节点

Question

有没有办法获取实际的 DOM 节点，以便我可以使用 Dom api 查询它，而不是被要求使用酶的 api，它仅适用于边缘情况，例如我需要断言关于 dom 节点本身的事情。

原文由 njorlsaga 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 wrapper.getDOMNode()

酵素文件

原文由 tonyjmnz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

也许您正在寻找酶的 instance() ？

 const wrapper = mount(<input type="text" defaultValue="hello"/>)
console.log(wrapper.instance().value); // 'hello'

附言：

instance() 应该给你一个 ReactComponent ，你可以从中使用 ReactDOM.findDOMNode(ReactComponent) 来获取 DOMNode。但是，当我这样做时，如下所示，它是与 wrapper.instance() 完全相同的对象：

 import ReactDOM from 'react-dom'
const wrapper = mount(<input type="text" defaultValue="sup"/>)
console.log(ReactDOM.findDOMNode(wrapper.instance()) == wrapper.instance()) // true

我不明白这是为什么。如果你 console.log() 其中之一，你会看到一个 HTMLInputElement ，但它会包含很多非本地 DOM 节点看起来的东西：

 HTMLInputElement {
  '__reactInternalInstance$yt1y6akr6yldi':
   ReactDOMComponent {
     _currentElement:
      { '$$typeof': Symbol(react.element),
        type: 'input',
        key: null,
        ref: null,
        props: [Object],
        _owner: [Object],
        _store: {} },

原文由 Tyler Collier 发布，翻译遵循 CC BY-SA 3.0 许可协议