Question

我刚开始使用Jest和Snapshot测试，我想知道为什么所有的例子都会进行深度渲染＆＃34;用于创建快照的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>
`;

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

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 Shallow Rendering进行快照测试：

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

describe('Test', () => {

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

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

react-test-renderer是一个不同的渲染器，它将您的组件（和整个树）渲染为JSON。目前它没有浅层渲染选项，它可以像在浏览器中一样工作并渲染所有东西，但是对于JSON。

它们都适合进行测试，因为它们不需要DOM环境，并且具有不同的特性。您可以选择一个更适合您的用例。

Answer 2

您可以使用enzyme浅层渲染组件。

我无法确切地告诉你为什么它不是文档中的首选方法，但我的猜测是因为功能没有内置在官方react-test-renderer中。

Answer 3

Shallow渲染是单元测试（仅测试单个组件）的首选。在您的问题中，浅呈现<A/>组件是正确的方法。 it('renders correctly')测试仅应检查<A/>是否以某种方式呈现。该测试不应取决于<B/>的呈现方式。

要测试涉及多个组件的更复杂的行为，可以使用mount或render。这样可以测试<A/>和<B/>的各个方面。

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

浅渲染Jest Snapshots

3 个答案: