根据react单元测试文档:
act()
要为Assert准备组件,请将渲染它并执行更新的代码 Package 在act()调用中。这使您的测试运行更接近React在浏览器中的工作方式。
但测试在两种情况下都运行得很好:
Without act()
it('Should return some text', () => {
render(<TestComponent />, container);
expect(container.textContent).toBe('some text');
});
字符串
使用act()
it('Should return some text', () => {
act(() => {
render(<TestComponent />, container);
});
expect(container.textContent).toBe('some text');
})
型
问题是:act()到底做什么,什么时候应该使用它?
4条答案
按热度按时间yjghlzjz1#
从act()docs:
在编写UI测试时,渲染、用户事件或数据获取等任务可以被视为与用户界面交互的“单元”。React提供了一个名为act()的助手,它可以确保在进行任何Assert之前,与这些“单元”相关的所有更新都已处理并应用到DOM。
进一步阅读和示例:https://github.com/mrdulin/react-act-examples/blob/master/sync.md
qyuhtwio2#
简而言之:
ReactTestUtil
的act()
确保在运行测试Assert之前完成任何可能需要时间的操作-呈现、用户事件、数据获取。字符串
如果你使用的是像React Testing Library这样的库,那么像
render
函数这样的东西 * 已经 * Package 在act()
中了,你通常不需要显式地使用它。请注意,React Testing Library确实有自己的
act()
函数,它只是ReactTestUtil
的act()
的 Package 器。这在异步状态更新中可能很有用,尽管其他React Testing Library工具(如waitFor
)可能更好。gtlvzcf83#
基本上,act()是用来模拟react实际工作的。但是如果你从@testing-library/react使用render,它会隐式地附带act()。你可以在文档中阅读更多关于它的信息。
odopli944#
总之
render()
/ some code这样的代码时,触发状态更新,你把这些代码封装在
act()
里面。act()
将确保所有状态都更新到Dom树,并在act()
完成之前执行useEffect
useEffect
中有xdc函数调用,调用act()
是不够的。你(也)需要手动添加一些计时器来等待xdc操作,例如:
act()
之后的waitFor
/findBy
act()
,你可以使用例如:waitFor
/findBy
render
和fireEvent
这样的东西已经被 Package 在act
中,所以不要再 Package 它们了。引用
什么时候在jest单元测试中使用act()和react-dom
通常,尝试使用
findBy()
https://youtu.be/NLFPvO8_hMQ?t=17749
字符串
https://callstack.github.io/react-native-testing-library/docs/understanding-act#act-warnings
https://legacy.reactjs.org/docs/test-utils.html#act
https://dev.to/dmtrkovalenko/how-act-works-inside-react-3hc0的
render
和fireEvent
已经 Package 在act
中!*https://flyingsquirrel.medium.com/when-should-i-use-act-in-react-testing-library-d7dd22a3340e的
act(() => { ... })
中,那么React不会把微任务排队,而是把这些任务放在act
拥有的一个特殊队列中,act
将在返回之前执行这些任务。还有其他的东西是异步的,因为它们依赖于真正的异步API,比如the Fetch API,React没有办法掩盖这一点;所以你不能只使用
act
,而是需要使用await
来等待它们完成。Why do I need waitFor or act instead of just using await in react testing?
act(...)
。它保证了在其范围内运行的任何代码的两件事:https://github.com/threepointone/react-act-examples/blob/master/sync.md
异步版本的
act
也会立即执行,但由于内部的一些异步操作,回调尚未完成。如果我们以原生方式测试组件而不处理其异步行为,我们将以sync act警告结束:
请注意,这还不是臭名昭著的
act
行为警告。它只要求我们用act
调用 Package 事件代码。然而,这次我们的即时状态更改不是源于外部触发的事件,而是形成组件的内部部分。那么我们如何在这种情况下应用act
?await waitFor(() => view.getByText('Count 1'));
https://callstack.github.io/react-native-testing-library/docs/understanding-act#asynchronous-act
act()
的模块,它有点长,让我们尝试分解它。ReactCurrentActQueue
非常重要,我们可以把它看作类似于MySQL中的任务队列。1.当
act(callback)
被调用时,这里调用回调https://jser.dev/react/2022/05/15/how-act-works/