Czy istnieje sposób na uzyskanie rzeczywistego węzła DOM, aby można go było przetestować za pomocą api Dom, w przeciwieństwie do wymogu używania api enzymu, to tylko dla przypadków skrajnych, gdzie dla przykład muszę potwierdzić rzeczy dotyczące samego węzła dom.jak sprawdzić aktualny węzeł DOM za pomocą enzymu reakcji
Jeśli utworzysz DOM przy użyciu jsdom, coś takiego:
import jsdom from 'jsdom';
const doc = jsdom.jsdom('<!doctype html><html><body></body></html>');
global.document = doc;
global.window = doc.defaultView;
Następnie można użyć enzymu mount() uczynić cokolwiek chcesz przetestować.
Następnie można dochodzić od stylu, którego szukasz:
expect(wrapper).to.have.style("display", "none");
Może szukasz enzymu instance()?
const wrapper = mount(<input type="text" defaultValue="hello"/>)
console.log(wrapper.instance().value); // 'hello'
PS:
instance() powinno dać ReactComponent, z którego można korzystać ReactDOM.findDOMNode (ReactComponent), aby uzyskać DOMNode. Jednak, gdy to zrobiłem, jak poniżej, to był dokładnie taki sam przedmiot jak wrapper.instance():
import ReactDOM from 'react-dom'
const wrapper = mount(<input type="text" defaultValue="sup"/>)
console.log(ReactDOM.findDOMNode(wrapper.instance()) == wrapper.instance()) // true
Nie rozumiem, dlaczego tak jest. Jeśli console.log() jednej z nich, zobaczysz HTMLInputElement, ale będzie zawierać wiele nienatywną węzła DOM poszukuje rzeczy:
HTMLInputElement {
'__reactInternalInstance$yt1y6akr6yldi':
ReactDOMComponent {
_currentElement:
{ '$$typeof': Symbol(react.element),
type: 'input',
key: null,
ref: null,
props: [Object],
_owner: [Object],
_store: {} },
Kiedy wypróbowałem twoją technikę, wydawało się działać zgodnie z oczekiwaniami. Innymi słowy, 'ReactDOM.findDOMNode (wrapper.instance())! = Wrapper.instance()'. FWIW, używam React 15 i Enzyme 2.3.0. – killthrush
Zastanawiam się, czy to dlatego, że używałem jsdom (lub, jak myślę, byłem głupi, nie mam permalinka do kodu, który uruchomiłem). Czy używasz jsdom? –
Tak, używam jsdom 9.1.0 - przepraszam, że zapomniałem wspomnieć, że – killthrush
wpadłem na ten sam problem. W moim przypadku testowałem coś zbudowanego z react-aria-modal, które renderuje nakładkę div w innej części DOM niż początkowy element renderowany z mount(). Aby przetestować, czy jest to poprawne, musiałem spojrzeć bardziej globalnie na DOM. W tym celu użyłem opcji attachTo z render(), aby upewnić się, że mój testowy DOM wygląda tak, jak powinien w prawdziwej przeglądarce. Here to dobry ogólny opis techniki z dokumentów.
W zależności od potrzeb można użyć podejścia Tyler Collier dla większej liczby lokalnych części DOM (findDOMNode przy użyciu instance()) lub mojej dla bardziej globalnego widoku.
Oto spec próba dla mojego przypadku użycia, pokazując jak setup/użytkowania/przerywaniem 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')
})
})
Można użyć soemething odczuwalna:
const dialog = component.find(Modal);
let modal = dialog.node._modal;
modal.getDialogElement().querySelector('#saveBtn')
oparciu o test modalne w reakcji, ładujący stronie
https://github.com/react-bootstrap/react-bootstrap/blob/master/test/ModalSpec.js
Wydaje się, że ta funkcja została dodana w ostatnim czasie, można zrobić wrapper.getDOMNode()
używam zamontować który wykorzystuje jsdom jak rozumiem, już jednak w jaki sposób można uzyskać węzła DOM rzeczywistą wrapper, tak mogę używać DOM API ? na przykład do zapytania className, ale * nie * przy użyciu prop ("className") – njorlsaga
Może istnieć lepszy sposób, ale zawsze możesz wywołać '.html()' na elemencie, a następnie użyć czegoś takiego jak 'DOMParser()': http://stackoverflow.com/questions/3103962/converting-html-string-into-dom-elements – Ryan27