Comment vérifier le noeud DOM réel en utilisant une enzyme de réaction

Existe-t-il un moyen d'obtenir le noeud DOM actuel afin que je puisse l'interroger avec le Dom api par opposition à l'utilisation de l'api de l'enzyme, c'est juste pour les cas de bord où, par exemple, je dois affirmer des choses sur le noeud dom lui-même.

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

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

PS:

instance() devrait vous donner un ReactComponent , à partir duquel vous pouvez utiliser ReactDOM.findDOMNode (ReactComponent) pour obtenir un DOMNode. Cependant, lorsque j'ai fait cela, comme le suivant, 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. Si vous console.log() soit l'un de ceux-ci, vous verrez un HTMLInputElement , mais il contiendra beaucoup de trucs de domaine DOM non natif:

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

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

Enzyme docs

Si vous créez un DOM en utilisant jsdom, quelque chose comme ceci:

 import jsdom from 'jsdom'; const doc = jsdom.jsdom('<!doctype html><html><body></body></html>'); global.document = doc; global.window = doc.defaultView;

Ensuite, vous pouvez utiliser enzyme mount () pour rendre ce que vous souhaitez tester.

Vous pouvez alors affirmer contre le style que vous recherchez:

expect(wrapper).to.have.style("display", "none");

J'ai rencontré ce même problème. Dans mon cas, j'ai testé quelque chose qui a été construit avec une react-aria-modal , ce qui rend la superposition de div dans une partie différente du DOM que l'élément initial rendu avec mount() . Afin de vérifier que cela fonctionne correctement, je devais regarder plus globalement le DOM. Pour cela, j'ai utilisé l'option attachTo de render() pour s'assurer que mon test DOM semble être dans un véritable navigateur. Voici une bonne description générale de la technique à partir des documents.

Selon ce dont vous avez besoin, vous pouvez utiliser l'approche de Tyler Collier pour plus de parties locales du DOM ( findDOMNode using instance() ) ou mine pour une vue plus globale.

Voici un exemple de spécification pour mon cas d'utilisation, montrant comment configurer / utiliser / démonter le DOM modérateur:

 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') }) })

J'ai utilisé:

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

Basé sur le test de Modal dans le site Web reac-bootstrap

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