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

有沒有辦法獲得實際的DOM節點，所以我可以用Dom api來查詢它，而不是被要求使用酶的API，它只是用於邊緣情況，其中for例如我需要斷言有關dom節點本身的事情。如何使用反應酶檢查實際DOM節點

2016-06-09 njorlsaga

，如果您使用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-09 16:56:24 Ryan27

我使用安裝它使用jsdom據我所知，已經但你會如何獲得實際包裝的DOM節點，所以我可以使用DOM API ？例如查詢className，但不*使用prop（'className'） – njorlsaga

可能有更好的方法，但你總是可以在元素上調用'.html（）'，然後使用類似'DOMParser（）'的東西： http://stackoverflow.com/questions/3103962/converting-html-string-into-dom-elements – Ryan27

也許你正在尋找酶的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-14 04:32:21

當我嘗試你的技術時，它似乎按預期工作。換句話說，'ReactDOM.findDOMNode（wrapper.instance（））！= wrapper.instance（）'。 FWIW，我正在使用React 15和Enzyme 2.3.0。 – killthrush

我不知道是否因爲我使用jsdom（或者，我認爲我是愚蠢的，我沒有固定的代碼）。你在使用jsdom嗎？ –

是的，我使用jsdom 9.1.0 - 對不起，我忘了提及 – killthrush

我碰到了同樣的問題。在我的情況下，我正在測試使用react-aria-modal構建的東西，該東西將覆蓋div呈現在DOM的不同部分，而不是使用mount()呈現的初始元素。爲了測試這個渲染是否正確，我需要在DOM方面更加全球化。爲此，我使用的attachTo選項來確保我的測試DOM看起來應該在真實的瀏覽器中。 Here是對文檔技術的很好的一般性描述。

根據您的需要，您可以使用泰勒科利爾的方法獲取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') 
    }) 

})

來源

2016-07-17 18:13:17 killthrush

您可以使用soemething像：

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

基礎上，測試模態反應中，引導網站

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

來源

2016-12-01 21:53:25 JPRLCol

這似乎是最近添加了這個功能，你可以做wrapper.getDOMNode()

Enzyme docs

來源

2017-01-13 21:45:58 tonyjmnz

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

回答

相關問題