REACT-Native-Testing-Library：如何使用ACT测试useEffect [英] react-native-testing-library: how to test useEffect with act

问题描述

我使用react-native-testing-library来测试我的反应本机组件。 我有一个组件(就本文而言，它已被过度简化)：

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进行测试。

任何帮助都将不胜感激。谢谢

推荐答案

我找到了解决办法：

import { render, waitFor } from 'react-native-testing-library';
import { ComponentUnderTest } from './componentundertest.tsx';

test('it updates content on successful call', async () => {
   const root = await waitFor(() =>
       render(<ComponentUnderTest />);
   );   
   expect(...);
})

这篇关于REACT-Native-Testing-Library：如何使用ACT测试useEffect的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！