web-dev-qa-db-ja.com

反応酵素を使用して実際のDOMノードを確認する方法

実際のDOMノードを取得する方法はありますか？酵素のapiを使用するのではなく、Dom apiを使用してクエリを実行できます。これは、たとえばdomノード自体に関することをアサートする必要があるEdgeの場合のみです。

javascriptdomreactjsenzyme
19
njorlsaga

この機能が最近追加されたようです、あなたはwrapper.getDOMNode()を行うことができます

酵素ドキュメント

21
tonyjmnz

おそらく酵素の 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: {} },
_
13
Tyler Collier

私はこの同じ問題に遭遇しました。私の場合、mount()でレンダリングされた初期要素とは異なるDOMの部分にオーバーレイdivをレンダリングする_react-aria-modal_でビルドされたものをテストしていました。これが適切にレンダリングされることをテストするために、DOMをよりグローバルに見る必要がありました。このため、render()のattachToオプションを使用して、テストDOMが実際のブラウザーで表示されるようにします。 ここ は、ドキュメントのテクニックの一般的な説明です。

必要に応じて、DOMのよりローカルな部分に対してTyler Collierのアプローチ（instance()を使用するfindDOMNode）を使用するか、またはよりグローバルなビューを使用することができます。

ここに私のユースケースのサンプル仕様があり、模擬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')
  })

})
_
1
killthrush

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");

1
Ryan27

DOM全体を印刷する場合は、

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

次のようなスーメッシングを使用できます。

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

反応ブートストラップWebサイトでのModalのテストに基づく

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

0
JPRLCol