React 快照测试 - react-test-renderer 与 react-testing-library

Question

我正在尝试在我的 React 应用程序中进行快照测试。我已经在一般情况下使用 react-testing-library 进行单元测试。但是对于快照测试，我在网上看到了不同的方法，使用 react-test-renderer 或 react-testing 库。这里有3个例子，它们之间有什么区别，什么是首选？

1.使用反应测试渲染器

test('renders correctly', () => {
  const tree = renderer
    .create(<Link page="http://www.facebook.com">Facebook</Link>)
    .toJSON();
  expect(tree).toMatchSnapshot();
});

2。使用反应测试库和 asFragment()

test('renders correctly', () => {
  const { asFragment } = render(<NotFound />);
  expect(asFragment()).toMatchSnapshot();
});

3。使用反应测试库和容器

test('renders the component', () => {
  const container = render(<Component />)
  expect(container.firstChild).toMatchSnapshot()
})

Answer 1

经过多次试验，我选择了选项 2（带有 asFragment() 的 react-testing-library），因为它可以生成更清晰的快照。选项 1 (react-test-renderer) 生成包含组件属性和其他不相关详细信息的输出。

React 快照测试 - react-test-renderer 与 react-testing-library

React snapshot testing - react-test-renderer vs. react-testing-library

react-test-renderer

react-testing-library