мелководье и всадник

Question

Ниже находится калькулятор компонента.

import SubComponent from './SubComponent';
export default class Calculator extends React.Component {
  render() {
    const {
      result,
    } = this.state;

    return (
      <form>
        <input
          type="number"
          defaultValue={0}
          ref={(el) => this.elements.value1 = el}
        />
        <input
          type="number"
          defaultValue={0}
          ref={(el) => this.elements.value2 = el}
        />
        <button type="button" onClick={this.add} />
        <p className="result">{result}</p>
        <SubComponent name="sub component"></SubComponent>
      </form>
    );
  }


}

И ниже субкомпонент.

import React from 'react';
import SubSubComponent from './SubSubComponent ';

const SubComponent = ({ name }) => (
  <div>
    {`${name}`}
    <SubSubComponent name="sub sub component"  />
  </div>
);

export default SubComponent;

А ниже субкомпонент, на который ссылается субкомпонент.

import React from 'react';
import SubSubComponent from './SubSubComponent ';

const SubComponent = ({ name }) => (
  <div>
    {`${name}`}
    <SubSubComponent name="sub sub component"  />
  </div>
);

export default SubComponent;

Когда я тестировал метод поверхностного и монтирования, предоставляемый ферментом, как показано ниже.

const calculator = shallow(
  <Calculator />
);
console.log(calculator.html());

const calculator2 = mount(
  <Calculator />
);
console.log(calculator2.html());

Они оба печатают ниже HTML.

<form><input type="number" value="0"><input type="number" value="0"><button type="button"></button>
  <p class="result"></p>
  <div>sub component<div>sub sub component</div>
  </div>
</form>

Но мелкий рендер в документе сказал: «Неглубокий рендеринг».Полезно ограничить себя тестированием компонента как модуля и убедиться, что ваши тесты не косвенно определяют поведение дочерних компонентов. '

Поэтому я подумал, что мелкий объект не отображает дочерний компонент.Не могли бы вы объяснить разницу между этими двумя методами?Благодаря.

Answer 1

Функция html возвращает всю разметку, включая подкомпоненты.Он обрабатывает мелкие и глубоко смонтированные компоненты одинаково, полностью визуализируя дерево.

См. Документы здесь .

Если вы выводите вывод мелкой строки другим способом, ондолжен показать мелкий вывод.Например:

expect(calculator).toEqual(...);

или

expect(wrapper.find(SubComponent).length).toBe(1);

Мелкий монтаж (без использования html) делает компонент <SubComponent />как <SubComponent />, тогда как при глубокой установке будет отображаться содержимое подкомпонента.См. этот ответ для более подробного объяснения мелкого и глубокого монтажа.