反应测试库渲染 VS ReactDOM.render

Noa*_*ebi 6 reactjs react-dom react-test-renderer react-testing-library

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

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

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

谢谢!

sli*_*wp2 2

谁能详细说明这两个库之间的区别?

RTL 的render()几乎等同于react-dom/test-utils act() + ReactDOM.render(),参见RTL render() 的源代码

RTL函数的返回对象render()包含一些常用的方法和DOM元素,例如container,它div只是document.body.

unmount()函数只是包装ReactDOM.unmountComponentAtNode()方法,仅此而已。

rerender()函数只是render()再次调用该函数,没有什么魔法。

在处理所有钩子之前测试继续进行

我不确定这是如何发生的,因为您没有提供太多信息。但是数据获取测试食谱介绍了如何使用反应钩子和异步代码测试功能组件。

什么时候使用行动?

act()文档很清楚。

要为断言准备组件,请将呈现该组件并在 act() 调用内执行更新的代码包装起来。这使得您的测试运行更接近 React 在浏览器中的工作方式。

如果使用RTL,则不需要act自己使用。它是由render函数包裹的。

测试我们的应用程序的正确方法是什么?

不依赖其实现细节来测试 React 组件的行为,这种方式也称为黑盒测试。这种方法使重构变得轻而易举,并且还推动您采用可访问性的最佳实践。有关详细信息,请参阅测试库应避免的内容测试实施详细信息