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

Question

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

Answer 1

如果你使用 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 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

我运行遇到了同样的问题。在我的例子中，我正在测试用 react-aria-modal 构建的东西，它在 DOM 的不同部分渲染叠加层 div，而不是用 mount() 渲染的初始元素。为了测试它是否正确呈现，我需要更全面地查看 DOM。为此，我使用 render() 的 attachTo 选项来确保我的测试 DOM 在真实浏览器中看起来应该是这样。 Here 是文档中对该技术的很好的一般描述。

根据您的需要，您可以将 Tyler Collier 的方法用于 DOM 的更多局部部分（findDOMNode 使用 instance()）或我的方法用于更全局的视图。

这是我的用例的示例规范，展示了如何 setup/use/teardown 模拟 DOM:

import MyModalComponent from '../components/my-modal-component'
import React from 'react'
import { jsdom } from 'jsdom'
import { mount } from 'enzyme'

describe('<MyModalComponent /> Component', function(){

  let wrapper

  beforeEach(function(){
    window.document = jsdom('')
    document.body.appendChild(document.createElement('div'))
  })

  afterEach(function(){
    wrapper.detach()
    window.document = jsdom('')
  })

  it('renders the modal closed by default', () => {
    wrapper = mount(
      <MyModalComponent prop1={"foo"}
                        prop2={"bar"}
      />, { attachTo: document.body.firstChild }
    )
    expect(wrapper.html()).to.contain('Content in component')
    expect(document.body.innerHTML).to.not.contain('Content in overlay')
  })

})

Answer 4

您可以使用类似的东西：

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 5

您可以使用wrapper.getDOMNode()

Enzyme docs

Answer 6

如果你想打印出整个DOM,

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

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

how to check the actual DOM node using react enzyme

javascript

dom

reactjs

enzyme