Когда следует использовать render и shallow в тестах ферментов / реакций?

до публикации этого вопроса я попытался найти в sqa stackexchange, но я не нашел сообщения о shallow и render там, поэтому я надеюсь, что кто-то может помочь мне здесь.

когда следует использовать shallow и render при тестировании компонентов react? Основываясь на документах airbnb, я сделал некоторые мнения о различии двух:

  1. поскольку shallow тестирует компоненты в блоке, поэтому он должен использоваться для "родительских" компонентов. (бывший. Таблицы, Обертки и т. д.)

  2. Render предназначен для дочерних компонентов.

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

Итак, как узнать, какой из них использовать в конкретном сценарии?

69
chai enzyme meteor reactjs testing

2 ответов

согласно фермента docs:

mount(<Component />) для полного рендеринга DOM идеально подходит для случаев использования, когда у вас есть компоненты, которые могут взаимодействовать с API DOM или могут потребовать полного жизненного цикла для полного тестирования компонента (т. е. componentDidMount и т. д.)

и

shallow(<Component />) для неглубокого рендеринга полезно ограничить себя тестированием компонента как единицы и убедиться, что ваши тесты не косвенно утверждают поведение дочерние компоненты.

и

render который используется для рендеринга компонентов react на статический HTML и проанализируйте полученную структуру HTML.

вы все еще можете видеть базовые "узлы" в мелком рендеринге, поэтому, например, вы можете сделать что-то вроде этого (слегка надуманного) примера, используя Ава как бегун спецификации:

let wrapper = shallow(<TagBox />);

const props = {
    toggleValue: sinon.spy()
};

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

test('it should safely set all props and still render two nodes', t => {
    wrapper.setProps({...props});
    t.is(wrapper.children().length, 2);
});

test('it should call toggleValue when an x class is clicked', t => {
    wrapper.setProps({...props});
    wrapper.find('.x').last().simulate('click');
    t.true(props.toggleValue.calledWith(3));
});

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

но вы не сможете получить полный жизненный цикл компонента, поэтому, если вы ожидаете, что что-то произойдет в componentDidMount, вы должны использовать mount(<Component />);

этот тест использует Синон шпионить за компонентом componentDidMount

test.only('mount calls componentDidMount', t => {

    class Test extends Component {
        constructor (props) {
            super(props);
        }
        componentDidMount() {
            console.log('componentDidMount!');
        }
        render () {
            return (
                <div />
            );
        }
    };

    const componentDidMount = sinon.spy(Test.prototype, 'componentDidMount');
    const wrapper = mount(<Test />);

    t.true(componentDidMount.calledOnce);

    componentDidMount.restore();
});

выше не пройдет с мелкий рендеринг или оказать

render предоставит вам только html, поэтому вы все равно можете делать такие вещи:

test.only('render works', t => {

    // insert Test component here...

    const rendered = render(<Test />);
    const len = rendered.find('div').length;
    t.is(len, 1);
});

надеюсь, что это помогает!

115

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

0