Являются ли поверхностные рендеры Enzyme / React дорогими?

Сейчас мы обсуждаем мелкую визуализацию и время для каждого теста, чтобы повторно запустить неглубокий при каждом тесте. Будь то методы, щелчки, длина селектора и т. Д., Я предполагаю, что наши тесты могут работать быстрее, если мы неглубоко отрисовываем компонент один раз перед запуском тестов по сравнению с каждым время.

Есть ли эксперты, которые могут указать, какой путь будет быстрее и есть ли какие-либо подводные камни? В этих примерах используется бегун AVA (и немного надуманный для обсуждения).

Например, вот один способ (A) ...

import TagBox from '../TagBox';
const props = { toggleValue: sinon.spy() };
let wrapper = {};

test.before(t => {
    wrapper = shallow(<TagBox />);
});

test('it should have two children', t => {
    t.is(wrapper.children().length, 2);
});

test('it should safely set props', t => {
    wrapper.setProps({...props});
    t.is(wrapper.children().length, 2);
});

test('it should call when clicked', t => {
    wrapper.setProps({...props});
    wrapper.find({tagX : true}).last().simulate('click');
    t.true(props.toggleValue.calledOnce);
});

А вот другой (B) ...

import TagBox from '../TagBox';

test('it sets value to null ...', t => {
    const props = {multiple: false};
    const wrapper = shallow(<TagBox {...props} />);
    t.is(wrapper.state('currentValue'), null);
});

test('it sets value to [] if multiple', t => {
    const props = {multiple: true};
    const wrapper = shallow(<TagBox {...props} />);
    t.deepEqual(wrapper.state('currentValue'), []);
});

test('it does not use value if ...', t => {
    const props = = {value: 3};
    const wrapper = shallow(<TagBox {...props} />);
    t.is(wrapper.state('currentValue'), null);
});

// etc. etc.

Обратите внимание, что в тесте B есть новая поверхностная оболочка для каждого теста, когда практически ничего не изменилось, кроме props.

Какую разницу во времени до завершения вы ожидаете из 100 тестов?

Также есть ли шанс, что неглубокий рендеринг один раз (тест A) в более высокой области может загрязнить тестовое состояние?


person 4m1r    schedule 03.08.2016    source источник


Ответы (2)


Средство поверхностного рендеринга предназначено для быстрого рендеринга, поскольку оно рендерит только один компонент. Так что, как правило, проблем с производительностью не возникает, когда вы создаете новый компонент для каждого теста.

Кроме того, ваш пример A может работать некорректно, если компонент TagBox имеет внутреннее состояние. Поэтому пример B - более предпочтительный способ написания тестов.

person just-boris    schedule 22.08.2016

shallow, вероятно, не ваша проблема здесь, поскольку он разработан, чтобы быть самым быстрым способом визуализации компонента без каскадного рендеринга всех его дочерних рендеров.

Тогда вы можете подумать о смене движка для запуска тестов, например, AVA работает медленнее, чем Jest. Я сделал это изменение год назад, и это НАМНОГО быстрее. Jest также предоставляет в своем базовом наборе более полезные вещи, такие как насмешливые функции примера.

Подробнее здесь: https://facebook.github.io/jest/

person Gustavo    schedule 09.08.2017