how to check the actual DOM node using react enzyme

后端未结

关注

 6  480

Is there a way to get the actual DOM node so I can the query it with the Dom api as opposed to being required to use enzyme\'s api, it\'s just for edge cases where for examp

相关标签:

6条回答

刺人心

2020-12-20 11:54

You can use wrapper.getDOMNode()

Enzyme docs

0 讨论(0)
发布评论:

提交评论
- 加载中...
猫巷女王i

2020-12-20 12:03
You can use soemething like :
```
const dialog = component.find(Modal);
let modal = dialog.node._modal;
modal.getDialogElement().querySelector('#saveBtn')
```
based on the test for Modal in react-bootstrap web site

https://github.com/react-bootstrap/react-bootstrap/blob/master/test/ModalSpec.js
0 讨论(0)
发布评论:

提交评论
- 加载中...
长发绾君心

2020-12-20 12:04
I ran into this same problem. In my case, I was testing something built with react-aria-modal, which renders the overlay div in a different part of the DOM than the initial element rendered with mount(). In order to test that this renders properly, I needed to look more globally at the DOM. For this, I used the attachTo option of render() to ensure that my test DOM looks like it should in a real browser. Here is a good general description of the technique from the docs.

Depending on what you need, you can use Tyler Collier's approach for more local parts of the DOM (findDOMNode using instance()) or mine for a more global view.

Here's a sample spec for my use case, showing how to setup/use/teardown the mock 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')
  })

})
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
情深已故

2020-12-20 12:09
If you create a DOM using jsdom, something like this:
```
import jsdom from 'jsdom';
const doc = jsdom.jsdom('<!doctype html><html><body></body></html>');
global.document = doc;
global.window = doc.defaultView;
```
Then you can use enzyme's mount() to render whatever you wish to test.

You can then assert against the style you are looking for:

expect(wrapper).to.have.style("display", "none");
0 讨论(0)
发布评论:

提交评论
- 加载中...

一向

2020-12-20 12:10

Perhaps you are looking for enzyme's instance()?

const wrapper = mount(<input type="text" defaultValue="hello"/>)
console.log(wrapper.instance().value); // 'hello'

PS:

instance() should give you a ReactComponent, from which you can use ReactDOM.findDOMNode(ReactComponent) to get a DOMNode. However, when I did that, like the following, it was the exact same object as wrapper.instance():

import ReactDOM from 'react-dom'
const wrapper = mount(<input type="text" defaultValue="sup"/>)
console.log(ReactDOM.findDOMNode(wrapper.instance()) == wrapper.instance()) // true

I don't understand why that is. If you console.log() either one of those, you'll see a HTMLInputElement, but it will contain lots of non-native DOM node looking stuff:

HTMLInputElement {
  '__reactInternalInstance$yt1y6akr6yldi': 
   ReactDOMComponent {
     _currentElement: 
      { '$$typeof': Symbol(react.element),
        type: 'input',
        key: null,
        ref: null,
        props: [Object],
        _owner: [Object],
        _store: {} },

0 讨论(0)

情深已故

2020-12-20 12:11
If you want to print out whole DOM,
```
const wrapper = shallow(<MyComponent/>);
console.log("DOM tree for humans", wrapper.text());
```
0 讨论(0)
发布评论:

提交评论
- 加载中...