21

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

4

6 回答 6

25

您可以使用wrapper.getDOMNode()

酶文档

于 2017-01-13T21:45:58.147 回答
13

也许您正在寻找酶的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: {} },
于 2016-06-14T04:32:21.050 回答
6

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

根据您的需要，您可以使用 Tyler Collier 的方法来处理 DOM 的更多本地部分（findDOMNodeusing instance()），或者使用我的方法来获得更全局的视图。

这是我的用例的示例规范，展示了如何设置/使用/拆除模拟 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')
  })

})
于 2016-07-17T18:13:17.070 回答
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");

于 2016-06-09T16:56:24.790 回答
0

如果你想打印出整个 DOM，

const wrapper = shallow(<MyComponent/>);
console.log("DOM tree for humans", wrapper.text());
于 2019-02-11T22:17:57.437 回答
0

你可以使用类似的东西：

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

于 2016-12-01T21:53:25.227 回答