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

在发布这个问题之前，我曾尝试在sqa stackexchange中搜索，但我没有找到关于浅层渲染的帖子，所以我希望有人能在这里帮助我

在测试react组件时，我应该何时使用shallow和render？ 根据airbnb文档，我对两者的区别发表了一些看法：

由于SHELFLOW将组件作为一个单元进行测试，因此应将其用于“父”组件。（例如桌子、包装纸等）

渲染用于子组件

我问这个问题的原因是，我很难弄清楚我应该使用哪一个（尽管医生说它们非常相似）

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

根据酶：

mount（）

对于具有可能与DOM API交互的组件，或者可能需要完整生命周期才能完全测试组件（即componentDidMount等）的用例，完全DOM呈现非常理想

vs

shallow（）

对于浅层渲染，有助于约束自己将组件作为一个单元进行测试，并确保测试不会间接断言子组件的行为

vs

render

用于将react组件呈现到静态HTML并分析生成的HTML结构

您仍然可以在浅层渲染中看到底层的“节点”，因此，例如，您可以使用以下作为等级库运行器执行类似（稍微做作的）示例的操作：

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

以上内容不会通过浅层渲染或渲染

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

test.only（'render works'，t=>{
//在此处插入测试组件。。。
const rendered=render（）；
const len=rendered.find（'div'）.length；
t、 is（len，1）；
});

---

希望这有帮助

shallow（）和mount（）的区别在于 shallow（）独立于组件呈现的子组件测试组件，而mount（）则深入测试组件的子组件

---

对于shallow（），这意味着如果父组件渲染另一个未能渲染的组件，则父组件上的shallow（）渲染仍将通过。

我仍然无法获得100%，为什么这三个动词会带来不同的方法。例如，可以在shallow中使用wrapper.getNode（），但不能在render中使用。有什么解释/链接/文档/博客能帮我把这件事联系起来吗？@HenryZhu从文档中应该可以清楚地看出，render更复杂，而不是肤浅，由于它实际上试图模拟特定组件的DOM树，nodeenzyme从v2到v3的迁移使lifecycle方法在shallow中默认为打开，关于这些差异的另一个很好的解释是这里，这里shallow（）和mount（）之间的区别是shallow（）在mount（）深入并测试组件的子组件时，测试组件与其呈现的子组件隔离。对于shallow（），这意味着如果父组件渲染另一个未能渲染的组件，则父组件上的shallow（）渲染仍将通过。当我测试组件的

props

时，是否应使用

shallow

和

mount

？

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

    // insert Test component here...

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