reactjs - react 测试库渲染 VS ReactDOM.render

Question

我们曾经使用 reactDom.render 进行测试。
我们在尝试测试功能组件时开始遇到问题。在这些情况下，测试会在处理所有钩子(Hook)之前继续进行。
我开始寻找解决方案，我发现 react-testing-library 也实现了渲染功能。它似乎解决了问题。 + 在某些情况下使用 act()。

react-testing-library render() 的返回值是一个带有 html 容器的特殊对象，而不是 React 组件。在这种情况下，我们不能再使用 reactDom 测试工具，因为它们需要组件。

我对所有这些库有点困惑，不确定测试我们的应用程序的正确方法是什么。
谁能详细说明两个库之间的区别？什么时候使用行为？ (我发现这篇文章建议不要在渲染中使用行为:react-test-renderer's create() vs. @testing-library/react's render())

谢谢!

Answer 1

Can anyone elaborate the differences between the two libraries?

render() RTL 几乎等同于 react-dom/test-utils act() + ReactDOM.render() ，见 source code of RTL render() .
RTL的返回对象 render()函数包含一些常用的方法和DOM元素，例如 container ，这只是一个 HTML div下元素 document.body .
unmount()函数只是包装 ReactDOM.unmountComponentAtNode()方法，仅此而已。
rerender()函数只需调用 render()再次运行，没有魔法。

the tests continued before all hooks were processed

我不确定这是如何发生的，因为您没有提供太多信息。但是 data fetching测试秘籍介绍了如何使用 React 钩子(Hook)和异步代码测试功能组件。

When to use act?

act()文档很清楚。

To prepare a component for assertions, wrap the code rendering it and performing updates inside an act() call. This makes your test run closer to how React works in the browser.

如果使用RTL，则不需要使用 act由你自己。它由 render 包裹功能。

what is the right approach to test our application.

测试 React 组件而不依赖于它们的实现细节。这种方法使重构变得轻而易举，并且还会促使您采用可访问性的最佳实践。欲了解更多信息，请参阅 what-you-should-avoid-with-testing-library和 Testing Implementation Details