当你应该使用渲染和浅酶/阵营测试？当你应该使用渲染和浅酶/阵营测试？(When should you

之前发布这个问题，我想在SQA stackexchange搜索，但我发现没有一篇关于浅，呈现在那里，所以我希望有人能帮助我在这里。

什么时候应该使用浅和渲染测试反应成分？基于该制作的Airbnb文档，我做了对二者的差别一些看法：

由于浅正在测试的组件作为一个单元 ，所以它应当用于“父”的组件。（实施例的表，包装器等）
渲染是子组件。

我问这个问题的原因是，我有一个很难弄清楚，我应该使用哪一个（虽然文档说，他们是非常相似）

所以，我怎么知道在特定情况下使用哪一个？

Answer 1:

由于每酶文档：

mount(<Component />)为完整DOM渲染是理想的，你有可能与的DOM API交互，或可能需要的整个生命周期，以完全测试组件（即，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 />) ;

本次测试使用兴农窥视组件的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);
});

希望这可以帮助！

Answer 2:

浅（）和山（）之间的区别是浅（）测试组件脱离他们提供，而安装（）的不断深入和测试组件的孩子子组件。对于浅（），这意味着，如果父组件将呈现无法呈现另一个组件，然后浅（）渲染父仍然会通过。