.debug([options]) => Строка

Возвращает строку в формате HTML, предназначенную для отладки обертки. Полезно для вывода в консоль, когда тесты не проходят, в то время как ожидается их успешное выполнение.

Аргументы

options (Object [необязательно]):

• options.ignoreProps: (Boolean [необязательно]): Нужно ли опускать свойства в результирующей строке. Свойства включаются по умолчанию.
• options.verbose: (Boolean [необязательно]): Нужно ли выводить массивы и объекты, переданные как свойства, в развернутом виде.

Возвращаемое значение

String: Результирующая строка.

Примеры

Предположим, у нас есть следующие компоненты:

function Foo() {
  return (
    <div className="foo">
      <span>Foo</span>
    </div>
  );
}

function Bar() {
  return (
    <div className="bar">
      <span>Non-Foo</span>
      <Foo baz="bax" object={{ a: 1, b: 2 }} />
    </div>
  );
}

В этом случае, выполнение:

console.log(mount(<Bar id="2" />).debug());

Выведет следующее в консоль:

<Bar id="2">
  <div className="bar">
    <span>
      Non-Foo
    </span>
    <Foo baz="bax" object={{...}}>
      <div className="foo">
        <span>
          Foo
        </span>
      </div>
    </Foo>
  </div>
</Bar>

Аналогично, выполнение:

console.log(mount(<Bar id="2" />).find(Foo).debug());

Выведет следующее в консоль:

<Foo baz="bax">
  <div className="foo">
    <span>
      Foo
    </span>
  </div>
</Foo>

и:

console.log(mount(<Bar id="2" />).find(Foo).debug({ ignoreProps: true }));

Выведет следующее в консоль:

<Foo>
  <div>
    <span>
      Foo
    </span>
  </div>
</Foo>

и:

console.log(mount(<Bar id="2" />).find(Foo).debug({ verbose: true }));

Выведет следующее в консоль:

<Foo baz="bax" object={{ a: 1, b: 2 }}>
  <div className="foo">
    <span>
      Foo
    </span>
  </div>
</Foo>