React使用Snapshot测试

原理

快照测试在第一次运行时将在React组件不同情况下的渲染结果保存一份快找文件，以后运行测试时，都会和第一次的比较，可以达到像素级别的匹配校验。

方法

创建一个命名为 __ tests __ 的文件夹，在其中添加以ComponentName.test.js命名的测试文件，如：

it("sightings renders correctly", () => {
  const testRenderer = TestRenderer.create(<Component />);
                                           //可选择性传入props

  expect(testRenderer.toJSON()).toMatchSnapshot();
});

控制台下执行npm test方法，会自动在__ tests __ 文件夹下生成 __ snapshots __文件夹以及一个.snap结尾的快照文件，这就是之后运行测试时会进行校验的快照文件。

当我们修改影响了Component组件样式后，snapshot测试会提示失败，需要控制台使用npm test – -u更新快照文件。