Question

学习使用React进行测试，我从这篇文章中发现了这一点：https://reactjs.org/docs/shallow-renderer.html

在编写React的单元测试时，浅层渲染会有所帮助。浅渲染可让您“深一层”渲染组件，然后断言有关其render方法返回的事实，而不必担心关于未实例化的子组件的行为或呈现。这不需要DOM。

有人可以解释“深层次”背后的概念吗？这和物体有什么关系吗？它们有多少层？

Answer 1

组件的深度是其子代和子代的数量：

const Level1Component = ()  => <Component /> // No children

const Level2Component = ({children}) => <Component>{children}</Component>

如果它的孩子有孩子，那就是depth = 3，依此类推。

Answer 2

这意味着当在内部具有其他组件的组件中进行测试时，您可以专注于要测试的目标组件，而忽略其子组件，子组件...等组件的内容。

例如，现在我要测试一个名为<ParentComponent>的组件，该组件内部有一个<ChildComponent />：

<div>
   <h1>Hi</h1>
   <ChildComponent />
</div>

使用<ParentComponent />进行测试时，它不会呈现<ChildComponent />的JSX部分，因此测试代码可以更加简单和纯净：

import ShallowRenderer from 'react-test-renderer/shallow';

// in your test:
const renderer = new ShallowRenderer();
renderer.render(<ParentComponent />);
const result = renderer.getRenderOutput();

expect(result.type).toBe('div');
expect(result.props.children).toEqual([
   <h1>Hi</h1>,
  <ChildComponent /> // don't need to worry about what's inside
]);

（此示例类似于React Doc）

Answer 3

这就是说，您可以仅通过渲染组件来检查父组件的状态，而无需渲染子组件的状态/数据。有道理？在这种情况下，顶层是顶层/浅层。

<parent-component>
{parent-data}
  <child-component-1>{child-1-data}</child-component-1>
  <child-component-2>{child-2-data}</child-component-2>
</parent-component>

“一层深”是什么意思？

3 个答案: