浅层渲染 Jest 快照

Question

我刚开始学习Jest和Snapshot测试，我想知道为什么所有的例子都要对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();
   });
});

快照：

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

虽然有时候这很有用，但我认为为A和B分别建立不同的测试/快照，并进行浅渲染更有意义，这样如果我改变B，我的A快照就不需要更新。因此，我希望我的快照看起来像这样：

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

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

- Hoffmann

Answer 1

更新（2018年1月3日）

Shallowrender已经迁移到react-test-renderer。

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

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

---

你可以使用react-test-utils浅渲染进行快照测试：

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

describe('Test', () => {

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

你可以创建一个只渲染一层的渲染器，也就是说：它只会渲染在组件的render()函数中的内容，而不会渲染子组件。

react-test-renderer 是一个不同的渲染器，它将你的组件（以及整个树）渲染为 JSON。目前它没有浅渲染的选项，它会像在浏览器中一样渲染所有内容，但是转换成 JSON 格式。

它们都很适合测试，因为它们不需要 DOM 环境，并且具有不同的特性。你可以选择更适合你使用情况的一个。

- Lucas

---

什么是react-test-renderer包？它在Jest文档中使用，但我不确定它来自哪里。它是React或Jest的一部分吗？它与react-addons-test-utils有何不同？为什么Jest文档不使用react-addons-test-utils？ - Hoffmann

react-test-renderer是一个将组件直接渲染为JSON的渲染器。react-addons-test-utils是一组实用工具，帮助创建React测试。它们都是独立的包：它们由React团队创建，但不随React或Jest一起提供。我会更新我的答案。 - Lucas

浅渲染器已经移动到 react-test-renderer/shallow，请按照此处所示的方式使用 https://facebook.github.io/react/docs/shallow-renderer.html。 - Levsero

Answer 2

你可以使用enzyme来浅渲染你的组件。

我不能确定为什么它不是文档中首选的方法，但我的猜测是因为这个功能没有内置在官方的react-test-renderer中。

- Andy_D

Answer 3

浅渲染在单元测试中更受欢迎，因为只有一个组件被测试。在您的问题中，对<A/>组件进行浅渲染是正确的方法。it('renders correctly')测试应该只检查<A/>以特定方式呈现。该测试不应依赖于<B/>的呈现方式。

要测试涉及多个组件的更复杂行为，可以使用挂载或渲染。这允许测试<A/>和<B/>的各个方面。

（我使用enzyme进行测试渲染。）

- Remolten