反应快照测试

快照测试 在测试 React 组件时特别有用。 让我们看看它是如何完成的。

反应测试渲染器

你需要在序列化它们之前渲染你的 React 组件。 请务必安装 react-test-renderer 以便您可以安装。

yarn add --dev react-test-renderer

为组件创建快照

假设您有一个组件，当您单击按钮时会分页某人

// Pager.js
import React from 'react';

export default function Pager({ name }) {
  const onClickCallback = () => alert(`Paging ${name}!`);
  return (
    <div>
      <h1>{name}</h1>
      <button onClick={onClickCallback}>Page</button>
    </div>
  );
}

你的测试应该看起来像

// Pager.test.js
import React from 'react';
import renderer from 'react-test-renderer';

import Pager from './Pager';

it('looks okay.', () => {
  const name = 'John';
  // Render the component with the props.
  const tree = renderer.create(<Pager name={name}/>)
  // Convert it to JSON.
    .toJSON();
  // And compare it to the snapshot.
  expect(tree).toMatchSnapshot();
});

快照转到 __snapshots__ 文件夹，所有后续测试运行都将与之进行比较。 从那里您可以随意编辑 Pager； 只要相同的道具给出相同的结果，快照就会匹配。 但这也是一个问题。

快照不是灵丹妙药

重要的是要注意，虽然对象是可序列化的，但函数（因此回调）不是。 如果你打开 Pager.test.js.snap，你会看到 onClickCallback 被表示为 [Function]。

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`properly writes name. 1`] = `
<div>
  <h1>
    John
  </h1>
  <button
    onClick={[Function]}
  >
    Page
  </button>
</div>
`;

如果 Pager 被重写以便 onClickCallback 执行其他操作，快照仍然会通过。

export default function Pager({ name }) {
  // Not what you want it to do, but it will still pass.
  const onClickCallback = () => alert(`Paging {name}!`);
  return (
    <div>
      <h1>{name}</h1>
      <button onClick={onClickCallback}>Page</button>
    </div>
  );
}