reactjs

효소 문서에 따라 :

mount(<Component />) for Full DOM 렌더링은 DOM API와 상호 작용할 수있는 구성 요소가 있거나 구성 요소를 완전히 테스트하기 위해 전체 수명주기가 필요할 수있는 사용 사례에 이상적입니다 (예 : componentDidMount 등).

대

shallow(<Component />) for Shallow 렌더링은 구성 요소를 하나의 단위로 테스트하도록 제한하고 테스트가 하위 구성 요소의 동작에 대해 간접적으로 주장하지 않도록하는 데 유용합니다.

대

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

도움이 되었기를 바랍니다!

답변