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

Question

我正在尝试在我的React应用程序中进行快照测试。我已经使用react-testing-library进行单元测试。然而，在进行快照测试时，我在网络上看到了不同的方法，可以使用react-test-renderer或react-testing library。以下是三个示例，请问它们之间有什么区别，哪种更受欢迎？

1. 使用react-test-renderer

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

2. 使用 react-testing-library 和 asFragment()

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

3. 使用 react-testing-library 和 container

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

- Naresh

Answer 1

经过多次试验，我选择了选项2（使用asFragment()的react-testing-library），因为它产生的快照更加干净。选项1（react-test-renderer）生成的输出包含组件属性和其他不相关的细节。

- Naresh

---

感谢@Naresh。我带着完全相同的问题来了; （不知何故）相关帖子：https://dev.to/manuartero/github-copilot-discovered-me-something-isnt-documented-1p6 - Manu Artero