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

标签 reactjs react-testing-library react-dom react-test-renderer

我们曾经使用 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())

谢谢!

最佳答案

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-libraryTesting Implementation Details

关于reactjs - react 测试库渲染 VS ReactDOM.render,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59935545/

相关文章:

reactjs - 如何在 React Hook Form v7 中使用单选按钮?

javascript - 类型错误 : scrollIntoView is not a function

javascript - 在 React 生命周期方法中使用本地方法

javascript - 从 props 中 react 未定义的 setState

javascript - fireEvent.click 后组件未更新

reactjs - 有没有办法在 MockedProvider - Apollo Client 中模拟 refetch?

javascript - react 合成事件在 Web 组件中不起作用

javascript - 获取滚动位置的正确方法

javascript - ReactDom 未定义

javascript - 如果我尝试在新选项卡中复制并粘贴 url,React Router 会给出 404