浅渲染笑话快照

Question

我刚开始进行 Jest 和快照测试，我想知道为什么所有示例都使用 "deep rendering" 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 分开 tests/snapshots 并进行浅层渲染更有意义，这样如果我更改 B，我的 A 快照就不需要更新。所以我希望我的快照看起来像这样：

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

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

Answer 1

您可以使用 enzyme 来 shallow-render 您的组件。

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

Answer 2

更新（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 3

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

要测试涉及多个组件的更复杂的行为，可以使用 mount or render。这允许测试 <A/> 和 <B/>.

的方面

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

浅渲染笑话快照

Shallow Rendering Jest Snapshots

unit-testing

reactjs

jestjs