Question

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

Answer 1

最近添加了此功能，您可以执行wrapper.getDOMNode()

Answer 2

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

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

<强> PS：

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: {} },

Answer 3

如果使用jsdom创建DOM，可以这样：

import jsdom from 'jsdom';
const doc = jsdom.jsdom('<!doctype html><html><body></body></html>');
global.document = doc;
global.window = doc.defaultView;

然后你可以使用酶的mount()来渲染你想要测试的任何东西。

然后你可以断言你正在寻找的风格：

expect(wrapper).to.have.style("display", "none");

Answer 4

我遇到了同样的问题。在我的例子中，我正在测试用$("#add").on("click",function(){ var url = "entries.json"; //Form input var id = $("#empID").val(); var fullName = $("#empFullName").val(); var prof = $("#empProf").val(); var entry = { "ids":id, "names":fullName, "skills":prof }; .... Ajax call for modification of the json file?!?!构建的东西，它将覆盖div放在DOM的不同部分而不是用react-aria-modal渲染的初始元素。为了测试这是否正确呈现，我需要在DOM上全局查看。为此，我使用了mount()的{{1}}选项来确保我的测试DOM看起来应该在真实的浏览器中。 Here是对文档技术的一般描述。

根据您的需要，您可以将Tyler Collier的方法用于DOM的更多本地部分（attachTo使用render()），或者使用更方便的全局视图。

这是我的用例的示例规范，展示了如何设置/使用/拆除模拟DOM：

findDOMNode

Answer 5

您可以使用以下内容：

const dialog = component.find(Modal);
let modal = dialog.node._modal;
modal.getDialogElement().querySelector('#saveBtn')

基于react-bootstrap网站上的Modal测试

https://github.com/react-bootstrap/react-bootstrap/blob/master/test/ModalSpec.js

Answer 6

如果您要打印出整个DOM，

const wrapper = shallow(<MyComponent/>);
console.log("DOM tree for humans", wrapper.text());

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

6 个答案: