C'è un modo per ottenere il vero nodo DOM così posso interrogarlo con l'API Dom invece di essere richiesto per usare l'api dell'enzima, è solo per i casi limite dove per esempio ho bisogno di affermare cose sul dom node stesso.come controllare il vero nodo DOM usando l'enzima reattivo
Se si crea un DOM utilizzando jsdom, qualcosa di simile:
import jsdom from 'jsdom';
const doc = jsdom.jsdom('<!doctype html><html><body></body></html>');
global.document = doc;
global.window = doc.defaultView;
quindi è possibile utilizzare degli enzimi di mount() per rendere tutto ciò che si desidera testare.
È quindi possibile valere nei confronti dello stile che stai cercando:
expect(wrapper).to.have.style("display", "none");
Forse siete alla ricerca di enzima di instance()?
const wrapper = mount(<input type="text" defaultValue="hello"/>)
console.log(wrapper.instance().value); // 'hello'
PS:
instance() dovrebbe darvi una ReactComponent, da cui è possibile utilizzare ReactDOM.findDOMNode (ReactComponent) per ottenere un DOMNode. Tuttavia, quando ho fatto che, come la seguente, è stato esattamente lo stesso oggetto come wrapper.instance():
import ReactDOM from 'react-dom'
const wrapper = mount(<input type="text" defaultValue="sup"/>)
console.log(ReactDOM.findDOMNode(wrapper.instance()) == wrapper.instance()) // true
Non capisco perché. Se si console.log() uno di quelli, vedrete un HTMLInputElement, ma conterrà un sacco di roba nodo DOM non nativa cercando:
HTMLInputElement {
'__reactInternalInstance$yt1y6akr6yldi':
ReactDOMComponent {
_currentElement:
{ '$$typeof': Symbol(react.element),
type: 'input',
key: null,
ref: null,
props: [Object],
_owner: [Object],
_store: {} },
Quando ho provato la tua tecnica, sembrava funzionare come previsto. In altre parole, 'ReactDOM.findDOMNode (wrapper.instance())! = Wrapper.instance()'. FWIW, sto usando React 15 e Enzyme 2.3.0. – killthrush
Mi chiedo se è perché stavo usando jsdom (o, credo di esserlo, sciocco non ho un permalink per il codice che ho eseguito). Stai usando jsdom? –
Sì, sto usando jsdom 9.1.0 - scusate ho dimenticato di dire che – killthrush
mi sono imbattuto in questo stesso problema. Nel mio caso, stavo testando qualcosa costruito con react-aria-modal, che rende il div overlay in una parte diversa del DOM rispetto all'elemento iniziale reso con mount(). Per verificare che questo renda correttamente, avevo bisogno di guardare più globalmente al DOM. Per questo, ho utilizzato l'opzione attachTo di render() per garantire che il mio DOM di test sia come dovrebbe in un browser reale. Here è una buona descrizione generale della tecnica dai documenti.
A seconda di cosa è necessario, è possibile utilizzare l'approccio di Tyler Collier per più parti locali del DOM (findDOMNode utilizzando instance()) o il mio per una vista più globale.
Ecco una specifica campione per il mio caso d'uso, che mostra come installare/uso/teardown il DOM finto:
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')
})
})
È possibile utilizzare soemething come:
const dialog = component.find(Modal);
let modal = dialog.node._modal;
modal.getDialogElement().querySelector('#saveBtn')
in base al test per modale nelle reagiscono-bootstrap sito
https://github.com/react-bootstrap/react-bootstrap/blob/master/test/ModalSpec.js
Sembra che questa funzionalità è stata aggiunta di recente, si può fare wrapper.getDOMNode()
Sto usando monto che utilizza jsdom a quanto ho capito, già ma come si otterrebbe nodo DOM del involucro reale in modo da poter utilizzare l'API dom ? per esempio per interrogare className ma * not * usando prop ('className') – njorlsaga
Potrebbe esserci un modo migliore, ma puoi sempre chiamare '.html()' sull'elemento, e poi usare qualcosa come 'DOMParser()': http://stackoverflow.com/questions/3103962/converting-html-string-into-dom-elements – Ryan27