React 快照测试

Snapshot 测试在测试 React 组件时尤其有用。

反应测试器

在将 React 组件序列化之前,您需要渲染 React 组件,请确保安装react-test-renderer,以便您可以这样做。

1yarn add --dev react-test-renderer

创建一个组件的快照

假设你有一个组件,当你点击一个按钮时,它会显示一个人。

 1// Pager.js
 2import React from 'react';
 3
 4export default function Pager({ name }) {
 5  const onClickCallback = () => alert(`Paging ${name}!`);
 6  return (
 7    <div>
 8      <h1>{name}</h1>
 9      <button onClick={onClickCallback}>Page</button>
10    </div>
11  );
12}

你的测试应该看起来像

 1// Pager.test.js
 2import React from 'react';
 3import renderer from 'react-test-renderer';
 4
 5import Pager from './Pager';
 6
 7it('looks okay.', () => {
 8  const name = 'John';
 9  // Render the component with the props.
10  const tree = renderer.create(<Pager name={name}/>)
11  // Convert it to JSON.
12    .toJSON();
13  // And compare it to the snapshot.
14  expect(tree).toMatchSnapshot();
15});

快照进入__snapshots__文件夹,所有后续的测试运行将与之进行比较. 从那里您可以随心所欲地编辑Pager;只要相同的特许权提供相同的结果,快照将匹配。

快照不是魔法子弹

重要的是要注意,虽然对象是可序列化的,但函数(因此是回调)不是。

 1// Jest Snapshot v1, https://goo.gl/fbAQLP
 2
 3exports[`properly writes name. 1`] = `
 4<div>
 5  <h1>
 6    John
 7  </h1>
 8  <button
 9    onClick={[Function]}
10  >
11    Page
12  </button>
13</div>
14`;

如果Pager被重写,以便onClickCallback做其他事情,快照仍然会通过。

 1export default function Pager({ name }) {
 2  // Not what you want it to do, but it will still pass.
 3  const onClickCallback = () => alert(`Paging {name}!`);
 4  return (
 5    <div>
 6      <h1>{name}</h1>
 7      <button onClick={onClickCallback}>Page</button>
 8    </div>
 9  );
10}