什么时候应该在酶/反应测试中使用渲染和浅化？

Question

在发布此问题之前，我尝试在sqa stackexchange中进行搜索，但是我没有找到有关浅层和渲染的文章，因此希望有人可以在这里为我提供帮助。

什么时候应该在测试反应组件时使用浅化和渲染？根据airbnb文档，我对两者的区别提出了一些意见：

1. 由于浅层将组件 作为一个整体 进行测试，因此应将其用于“父级”组件。（例如桌子，包装纸等）

2. 渲染用于子组件。

我问这个问题的原因是，我很难确定应该使用哪一个（尽管文档说它们非常相似）

那么，我怎么知道在特定情况下使用哪个呢？

Answer 1

根据酶文档：

mount(<Component />) 对于完全DOM呈现，对于您的组件可能与DOM
API交互或可能需要完整html" target="_blank">生命周期才能完全测试组件的使用案例（例如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);
});

希望这可以帮助！