web-dev-qa-db-fra.com

comment vérifier le noeud DOM réel en utilisant react enzyme

Existe-t-il un moyen d’obtenir le nœud DOM réel pour pouvoir interroger l’API Dom au lieu d’être obligé d’utiliser l’API de enzyme, c’est juste pour les cas Edge où je dois, par exemple, affirmer le nœud Dom lui-même.

javascriptdomreactjsenzyme
16
njorlsaga

Il semble que cette fonctionnalité ait été ajoutée récemment, vous pouvez faire wrapper.getDOMNode()

Documents sur les enzymes

18
tonyjmnz

Peut-être cherchez-vous l'enzyme instance () ?

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

PS:

instance() devrait vous donner une ReactComponent à partir de laquelle vous pouvez utiliser ReactDOM.findDOMNode (ReactComponent) pour obtenir un DOMNode. Cependant, lorsque j'ai fait cela, comme ce qui suit, c'était exactement le même objet que wrapper.instance():

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

Je ne comprends pas pourquoi c'est. Si vous console.log() l'une ou l'autre de ces fonctions, vous verrez une HTMLInputElement, mais elle contiendra un grand nombre d'éléments de nœud DOM non natifs à la recherche:

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

J'ai rencontré ce même problème. Dans mon cas, je testais quelque chose construit avec react-aria-modal, qui rend la division de superposition dans une partie du DOM différente de celle de l'élément initial rendu avec mount(). Afin de vérifier que cela rend correctement, je devais regarder plus globalement le DOM. Pour cela, j'ai utilisé l'option attachTo de render() afin de m'assurer que mon DOM de test ressemble à ce qu'il devrait être dans un navigateur réel. Ici est une bonne description générale de la technique à partir de la documentation.

Selon vos besoins, vous pouvez utiliser l'approche de Tyler Collier pour des parties plus locales du DOM (findDOMNode à l'aide de instance()) ou la mienne pour une vue plus globale.

Voici un exemple de spécification pour mon cas d'utilisation, montrant comment configurer/utiliser/supprimer le modèle fictif:

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

Si vous voulez imprimer des DOM entiers,

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

Vous pouvez utiliser quelque chose comme:

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

basé sur le test de Modal sur le site Web de react-bootstrap

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

0
JPRLCol