Могу ли я (и должен ли я) делать утверждения о том, какие элементы HTML визуализируются компонентом с помощью функции shallow () Enzyme?

Вопрос:

Я пишу модульный тест для компонента React под названием <BaseEdit />. Чтобы проверить, что компонент работает, я хочу утверждать, что он будет отображать HTML-элемент <input/>, и я хочу сделать это, используя shallow () вместо mount ().

Следующий тестовый пример работает:

const baseEditWrapper = mount(<BaseEdit />)
const inputElement = baseEditWrapper.find('input')
assert(inputElement.exists())
assert.strictEqual(inputElement.prop('type'), 'text')

Однако, если я изменю mount() на shallow(), тест не пройдёт. Это не удается, потому что baseEditWrapper.find('input') возвращает пустой / заглушку / несуществующий объект ShallowWrapper.

Базовый HTML:

Компонент <BaseEdit /> при монтировании с использованием Enzyme и JSDom создает следующие элементы DOM.

<div class="MuiFormControl-root MuiTextField-root WithStyles(ForwardRef(TextField))-root-27 WithStyles(ForwardRef(TextField))-root-96" style="width:120px">
  <div class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl">
    <input type="text" aria-invalid="false" class="MuiInputBase-input MuiInput-input"/>
  </div>
</div>

Дополнительная информация:

Документация для shallow () находится здесь.

Вопрос, когда следует использовать рендеринг и мелкий в тестах на реакцию ферментов? показывает, что поиск селекторами поддерживается при использовании shallow ().

Приведенный ниже тестовый пример доказывает, что shallow выполняет рендеринг нескольких слоев элементов HTML и действует как временное решение для моего вопроса.

const shallowWrapper = shallow(<BaseEdit />)
assert(shallowWrapper.html().includes('<input')
assert(shallowWrapper.html().includes('type=\"text\"'))

Однако такое решение кажется хакерским, и я бы предпочел, чтобы мое решение соответствовало использованию интерфейса Enzyme ShallowWrapper.


reactjs jsdom enzyme
person Josh Desmond    schedule 15.08.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы должны иметь возможность использовать .dive() для поиска ввода:

const input = wrapper.find(TextField).dive().find('input')

Возможно, вам даже придется погрузиться более одного раза, если input вложен в несколько компонентов React:

// This is a little contrived, but something like this:
const InnerTextField = () => <input />;
const TextField = () => <InnerTextField />;
const BaseEdit = () => <TextField />;

// You would need to do this to find the input:
const input = wrapper.find(TextField).dive().dive().find('input');

Вы также спросили, следует ли использовать shallow:

Если вы хотите сделать утверждения в базовом HTML (например, вы хотите, чтобы BaseEdit всегда отображал input), вам, вероятно, лучше использовать mount, если нет причин не делать этого.

shallow полезен, когда вы хотите протестировать единственный слой вашего дерева компонентов. Похоже, вы используете пользовательский интерфейс материала, поэтому возможный тест может заключаться в том, чтобы проверить, правильно ли BaseEdit передает реквизиты TextField.

it('passes the required prop to the underlying component', () => {
  const wrapper = shallow(<BaseEdit required />);
  expect(wrapper.find(TextEdit).props().required).toBe(true);
  wrapper.setProps({ required: false });
  expect(wrapper.find(TextEdit).props().required).toBe(false);
})
person helloitsjoe    schedule 17.08.2019
comment
Спасибо за понимание. Использование dive () показалось более жестким, чем проверка HTML, поэтому я решил просто использовать mount () для всего. Самая большая причина в том, что mount () vs shallow () имеет значение в масштабе миллисекунд, в то время как выполнение всего набора тестов mocha (который включает в себя процесс загрузки узла с последующей загрузкой всех модулей) занимает минуты. Я нашел эти две статьи интересными для изучения споров между shallow () и mount (): kentcdodds.com/blog/why-i- Never-use-shallow-rendering, hackernoon.com/why-i-always-use-shallow-rendering-a3a50da60942 - person Josh Desmond; 20.08.2019
comment
Звучит неплохо! Есть много споров о неглубоких и монтированных, ИМО, они оба имеют свое применение, только для разных типов тестирования. Рад, что смог помочь! - person helloitsjoe; 20.08.2019