我正在使用react-native-testing-library
来测试我的react-native组件。我有一个组件(为了本文的目的,它被过度简化了):
export const ComponentUnderTest = () => {
useEffect(() => {
__make_api_call_here_then_update_state__
}, [])
return (
<View>
__content__goes__here
</View>
)
}
下面是我的(简化的)component.spec.tsx
:
import { render, act } from 'react-native-testing-library';
import { ComponentUnderTest } from './componentundertest.tsx';
test('it updates content on successful call', () => {
let root;
act(() => {
root = render(<ComponentUnderTest />); // this fails with below error message
});
expect(...);
})
现在当我运行这段代码时,我得到了这个错误:Can't access .root on unmounted test renderer
我甚至不知道这个错误消息是什么意思。我按照react-native-testing-library
的文档来测试act and useEffect
。
任何帮助都将不胜感激。谢谢
8条答案
按热度按时间zte4gxcn1#
我找到了一个变通办法:
f5emj3cl2#
您可以使用以下命令执行此操作:@测试库/React Native
示例:
应该也可以使用useEffect,但是我还没有自己测试过。使用useState效果很好。
mmvthczy3#
应该是
----完整的代码片段。它为我工作后,上述变化
xjreopfe4#
以下步骤解决了我的问题:
React
和react-test-renderer
版本升级到16.9或更高版本,在act
中支持async
函数(据我所知,两个软件包需要是同一版本)react-native-testing-library
的render
替换为react-test-renderer
的create
(谢谢好心的先生,它帮了我的忙)async
,在act
之前添加await
,并向其传递async
函数最后的结果是这样的:
gc0ot86w5#
我使用
useEffect
来测试异步组件(该组件会触发setState
的重新呈现)的方法是将测试用例设置为正常,但使用waitFor
orfindBy
来阻塞Assert,直到组件使用获取的数据重新呈现。下面是一个简单的、可运行的示例:
这没有给予我任何
act
警告,但我也有过这样的警告。This open GitHub issue似乎是规范的资源。使用的 Package :
在Jest配置中:
用于
.toHaveTextContent
匹配器。或者,您可以使用导入:4bbkushb6#
这样试试看
5tmbdcev7#
您可以非常轻松地在RNTL测试中使用
useEffects
:不需要直接使用
act
,RNTL在钩子下为您使用它。在
A
行上使用的确切 predicate 取决于您在useEffect
回调中所做的组件更改,这里我假设当获取成功时,有某个Text
组件显示“Results”文本。需要注意的重要一点是,您的获取可能是异步的,因此您需要使用
findBy*
查询,它将等待异步操作发生(默认超时为~5000毫秒,可以调整)。另一件需要注意的事情是,模拟网络调用是一个很好的做法,这样你的测试就不会调用真正的API。这有很多原因,测试执行速度,测试稳定性,不总是能够达到测试目的所需的API响应,等等。推荐的工具是MSW库。
00jrzges8#
下面是一个更新的代码片段及其说明:
说明:
yourMockApi.get
方法以使用mockResolvedValue返回成功响应。waitFor
函数用于等待模拟API调用完成后再继续测试。await
关键字用于等待waitFor函数完成,然后再继续测试。