如何使用反應酶檢查實際的 DOM 節點

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

我遇到了同樣的問題。 就我而言，我正在測試用react-aria-modal構建的東西，它在 DOM 的不同部分呈現覆蓋 div，而不是用mount()呈現的初始元素。 為了測試這是否正確呈現，我需要更全面地查看 DOM。 為此，我使用了render()的attachTo選項來確保我的測試 DOM 在真實瀏覽器中看起來應該是這樣。 這是文檔中對該技術的很好的一般描述。

根據您的需要，您可以將 Tyler Collier 的方法用於 DOM 的更多本地部分（ findDOMNode使用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')
  })

})

Answer 4

如果您使用 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 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 個解決方案

解決方案1
25 已采納 2017-01-13 21:45:58

解決方案2
13 2016-06-14 04:32:21

解決方案3
4 2016-07-17 18:13:17

解決方案4
1 2016-06-09 16:56:24

解決方案5
0 2016-12-01 21:53:25

解決方案6
0 2019-02-11 22:17:57

如何使用反應酶檢查實際的 DOM 節點

問題描述

6 個解決方案

解決方案1 25 已采納 2017-01-13 21:45:58

解決方案2 13 2016-06-14 04:32:21

解決方案3 4 2016-07-17 18:13:17

解決方案4 1 2016-06-09 16:56:24

解決方案5 0 2016-12-01 21:53:25

解決方案6 0 2019-02-11 22:17:57

解決方案1
25 已采納 2017-01-13 21:45:58

解決方案2
13 2016-06-14 04:32:21

解決方案3
4 2016-07-17 18:13:17

解決方案4
1 2016-06-09 16:56:24

解決方案5
0 2016-12-01 21:53:25

解決方案6
0 2019-02-11 22:17:57