Подтвердить что ты не робот

Когда вы должны использовать рендеринг и неглубоко в тестах на ферменты/реактивы?

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

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

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

  • Render - это дочерние компоненты.

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

В соответствии с Enzyme docs:

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

против.

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

против.

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

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

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 />);

В этом тесте используется Sinon, чтобы следить за компонентом 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);
});

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