Question

在发布这个问题之前，我试图在sqa stackexchange中搜索，但是我发现没有关于浅的帖子并在那里渲染，所以我希望有人可以帮助我。

我应该何时使用浅层和渲染测试反应组件？根据airbnb文档，我对两者的区别提出了一些看法：

由于浅层测试组件作为一个单元，因此它应该用于“父”组件。（例如，桌子，包装等）
渲染适用于子组件。

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

那么，我如何知道在特定场景中使用哪一个？

Answer 1

根据酶docs：

mount(<Component />)对于完整DOM渲染非常适用于您拥有可能与DOM apis交互的组件的情况，或者可能需要整个生命周期才能完全测试组件（即componentDidMount等）

VS。

shallow(<Component />)用于浅层渲染对于约束自己将组件作为一个单元进行测试很有用，并确保您的测试不会间接断言子组件的行为。

VS

render用于将反应组件呈现给静态HTML 并分析生成的HTML结构。

您仍然可以看到基础＆＃34;节点＆＃34;在一个浅层渲染中，例如，您可以使用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);
});

希望这有帮助！

Answer 2

shallow（）和mount（）之间的区别在于，shallow（）会将组件与它们呈现的子组件隔离开来进行测试，而mount（）则更深入并测试组件的子组件。对于shallow（）来说，这意味着如果父组件渲染了另一个无法渲染的组件，那么在父组件上的shallow（）渲染仍然会通过。

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

2 个答案: