효소/반응 테스트에서 렌더와 얕은 렌더를 언제 사용해야 하는가?

효소/반응 테스트에서 렌더와 얕은 렌더를 언제 사용해야 하는가?

이 질문을 올리기 전에 나는 sqa stackexchange를 검색하려고 했지만 얕은 곳에 대한 게시물을 찾지 못했기 때문에 누군가가 나를 도와줄 수 있기를 바란다.

테스트 반응 구성 요소를 테스트할 때 언제 얕게 사용하여 렌더링해야 하는가?나는 에어비앤비 문서를 바탕으로 두 개의 차이점에 대해 몇 가지 의견을 냈다.

1. 얕은 부분이 하나의 단위로 구성품을 테스트하기 때문에 '상위' 구성품에 사용해야 한다(예: 표, 포장지 등).

2. 렌더는 하위 구성 요소용입니다.

내가 이 질문을 한 이유는, 내가 어떤 것을 사용해야 하는지 알아내기가 어렵기 때문이다(의사에서는 매우 비슷하다고 하지만)

그렇다면, 특정 시나리오에서 어떤 것을 사용해야 하는지 어떻게 알 수 있을까?

효소 독에 따르면:

mount(<Component />)전체 DOM 렌더링은 DOM 아피스와 상호 작용할 수 있는 구성요소가 있거나 구성요소(즉, 구성요소DidMount 등)를 완전히 테스트하기 위해 전체 라이프사이클이 필요할 수 있는 사용 사례에 이상적이다.

대

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

렌더링, 소품 설정, 선택기 찾기 및 합성 이벤트도 모두 얕은 렌더링으로 지원되므로 대부분의 경우 이 기능을 사용할 수 있다.

그러나 구성 요소의 전체 라이프사이클을 얻을 수는 없으므로 구성 요소DidMount에서 발생할 것으로 예상하는 경우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();
});

위의 내용은 얕은 렌더링 또는 렌더링으로 통과되지 않음

renderhtml만 제공하므로 다음과 같은 작업을 수행할 수 있다.

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

    // insert Test component here...

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

이게 도움이 되길 바래!

얕은()과 마운트()의 차이는 마운트()가 더 깊이 들어가 구성 요소의 하위()를 테스트하는 동안 렌더링하는 하위 구성 요소로부터 격리하여 구성 요소를 테스트한다는 것이다.

얕은()의 경우, 이는 상위 구성요소가 렌더링하지 못하는 다른 구성요소를 렌더링하더라도 상위 구성요소의 얕은() 렌더링은 여전히 통과한다는 것을 의미한다.

참조URL: https://stackoverflow.com/questions/38710309/when-should-you-use-render-and-shallow-in-enzyme-react-tests