Unit testing 浅层渲染Jest快照

我只是从Jest和快照测试开始，我想知道为什么所有示例都对React组件进行“深度渲染”来创建快照

范例

const A = () => {
   return <div><B /><B /></div>
}
const B = () => {
   return <div>This is B</div>
}

// TEST
describe('Test', () => {

   it('renders correctly', () => {
      const tree = ReactTestRenderer.create(
         <A />
      ).toJSON();

      expect(tree).toMatchSnapshot();
   });
});

const A=（）=>{
返回
}
常数B=（）=>{
我是B
}
//试验
描述（'测试'，（）=>{
它（'正确渲染'，（）=>{
const tree=ReactTestRenderer.create(
).toJSON（）；
expect（tree.toMatchSnapshot（）；
});
});

快照：

exports[`Summary DOM rendering renders correctly 1`] = `
<div>
  <div>
     This is B
  </div>
  <div>
     This is B
  </div>
</div>
`;

exports[`Summary DOM rendering正确呈现1`]=`
这是B
这是B
`;

虽然这是有用的，但有时我认为对A和B进行单独的测试/快照并进行浅层渲染更有意义，因此，如果我更改B，我的A快照不需要更新。因此，我希望我的快照如下所示：

exports[`Summary DOM rendering renders correctly 1`] = `
<div>
  <B />
  <B />
</div>
`;

exports[`Summary DOM rendering正确呈现1`]=`
`;

有没有办法做到这一点？这首先是个好主意吗？如果可能，为什么文档中的浅层渲染不是首选方式？

您可以使用浅层渲染组件

---

我不能肯定地告诉你为什么它不是文档中的首选方法，但我猜测这是因为该功能没有内置到官方的

react测试渲染器中（2018年1月3日）

Shallowrender已被移至

使用它，您可以创建只渲染1级深度的渲染器，即：它只渲染组件的
render（）
函数中的内容，而不渲染子组件

react test renderer
是一个不同的渲染器，它将组件（以及整个树）渲染为JSON。目前它没有浅层渲染的选项，它将像在浏览器中一样工作并渲染所有内容，但渲染到JSON

它们都适合于测试，因为它们不需要DOM环境，并且具有不同的特性。您可以选择一个更适合您的用例。
渲染是单元测试的首选，单元测试只测试单个组件。在您的问题中，可以使用浅渲染
或。这允许测试
的测试渲染方面。）
什么是react测试渲染器包？它在Jest文档中使用，但我不确定它来自哪里。这是反应还是玩笑的一部分？它与react插件测试UTIL有何不同？为什么Jest文档不使用react addons test utils？
react test renderer
是一个直接将组件呈现给JSON的呈现器
react插件测试utils
是一组帮助创建react测试的实用工具。它们都是独立的包：它们是由React团队创建的，但它们既不是React也不是Jest。我将更新我的答案。浅层渲染器已移动到
react test renderer/shallow
，并按此处所示使用它。
import ShallowRenderer from 'react-test-renderer/shallow'

it('Matches snapshot', () => {
  const renderer = new ShallowRenderer()
  const result = renderer.render(<A />)
  expect(result).toMatchSnapshot()
})

import ReactTestUtils from 'react-addons-test-utils';

describe('Test', () => {

   it('renders correctly', () => {
      const renderer = ReactTestUtils.createRenderer();
      expect(renderer.render(<A />)).toMatchSnapshot();
   });
});