it-swarm.com.ru

Как проверить фактический DOM-узел, используя реагирующий фермент

Есть ли способ получить реальный DOM-узел, чтобы я мог запросить его с помощью API-интерфейса Dom, а не использовать API-интерфейс энзима, это только для случаев Edge, где, например, мне нужно утверждать что-то о самом узле DOM.

16
njorlsaga

Кажется, что эта функциональность была добавлена ​​недавно, вы можете сделать wrapper.getDOMNode()

Ферментные документы

18
tonyjmnz

Возможно, вы ищете фермент instance () ?

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

PS:

instance() должен дать вам ReactComponent, из которого вы можете использовать ReactDOM.findDOMNode (ReactComponent) для получения DOMNode. Однако, когда я сделал это, как показано ниже, это был тот же объект, что и wrapper.instance():

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

Я не понимаю, почему это так. Если вы console.log() один из них, вы увидите HTMLInputElement, но он будет содержать множество вещей, не связанных с DOM-узлами:

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

Я столкнулся с этой же проблемой. В моем случае я тестировал что-то, созданное с помощью react-aria-modal, который отображает оверлейный элемент div в другой части DOM, чем начальный элемент, отображаемый с помощью mount(). Чтобы проверить, правильно ли это выглядит, мне нужно было взглянуть на DOM более глобально. Для этого я использовал параметр attachTorender(), чтобы убедиться, что моя тестовая DOM выглядит так, как должна быть в реальном браузере. Здесь хорошее общее описание техники из документации.

В зависимости от того, что вам нужно, вы можете использовать подход Tyler Collier для более локальных частей DOM (findDOMNode using instance()) или мой для более глобального представления.

Вот пример спецификации для моего варианта использования, показывающий, как настроить/использовать/демонтировать макет 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')
  })

})
1
killthrush

Если вы создаете DOM, используя jsdom, что-то вроде этого:

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

Затем вы можете использовать энзим mount () для рендеринга того, что вы хотите протестировать.

Затем вы можете утверждать против стиля, который вы ищете:

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

1
Ryan27

Если вы хотите распечатать весь DOM,

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

Вы можете использовать что-то вроде:

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

основанный на тесте для Modal на веб-сайте реакции-начальной загрузки

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

0
JPRLCol