Как проверить фактический DOM node с использованием реакционного фермента

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

ОТВЕТЫ

Ответ 1

Возможно, вы ищете фермент 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 node выглядящих вещей:

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

Ответ 2

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

Enzyme docs

Ответ 3

Если вы создаете 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");

Ответ 4

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

В зависимости от того, что вам нужно, вы можете использовать подход Tyler Collier для более локальных частей DOM (findDOMNode с помощью 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')
  })

})