[英]When testing, code that causes React state updates should be wrapped into act(...) - with simple react-native nested screen/components with jest axios
I am new to unit testing/jest, but I know some about react native.我是单元测试/玩笑的新手,但我知道一些关于本机反应的知识。 I want to write a test for my HomeScreen, which contains a component that makes a simple request.
我想为我的 HomeScreen 编写一个测试,其中包含一个发出简单请求的组件。 The code runs without any issue but fails when I run it with Jest.
代码运行没有任何问题,但当我用 Jest 运行它时失败。
HomeScreen.js HomeScreen.js
import { View } from 'react-native'
import APIExample from '@components/Examples/APIExample'
const HomeScreen = () => {
return (<View> <APIExample /> </View>)
}
export default HomeScreen
HomeScreen.test.js HomeScreen.test.js
import { render } from '@testing-library/react-native'
import HomeScreen from '@screens/HomeScreen'
it('should run', async () => {
const { getByText } = await render(<HomeScreen />)
})
APIExample.js APIExample.js
import { useState, useEffect } from 'react'
import { Text, View } from 'react-native'
import API from '../../API'
const APIExample = () => {
const [apiResponse, setApiResponse] = useState(null)
const Submit = async () => {
const response = await API.Test()
setApiResponse(response)
}
useEffect(() => {
Submit()
}, [])
return (
<View>
<Text>
{JSON.stringify(apiResponse)}
</Text>
</View>
)
}
export default APIExample
I try to figure out why does it keep saying that I should wrap it in act and what exactly do I need to wrap?我试图弄清楚为什么它一直说我应该把它包装起来,我到底需要包装什么? I already tried to wrap the render whole line but had no success.
我已经尝试将渲染整行包装,但没有成功。
The API.Test is a simple axios.get API.Test 是一个简单的 axios.get
The error I've kept getting is:我一直收到的错误是:
Warning: An update to APIExample inside a test was not wrapped in act(...).
When testing, code that causes React state updates should be wrapped into act(...):
act(() => {
/* fire events that update state */
});
/* assert on the output */
This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
It happened to me with fireEvent
a couple of days ago.几天前发生在我身上的
fireEvent
。 Try this:尝试这个:
await waitFor(()=> render(<HomeScreen />))
The reason you're facing the issue is because of state change that's happening.您遇到问题的原因是因为 state 正在发生变化。 While on first render the apiResponse data is set as null.
在第一次渲染时,apiResponse 数据设置为 null。 And later with the api response the apiResponse has a value so there is re-render that has occured, so jest complains about it.
后来在 api 响应中, apiResponse 有一个值,因此发生了重新渲染,所以开玩笑地抱怨它。
To resolve you could use await waitFor(() => expect(api).toHaveBeenCalledTimes(1))
.要解决,您可以使用
await waitFor(() => expect(api).toHaveBeenCalledTimes(1))
。 This will wait for a specific period of time.这将等待一段特定的时间。
Suggestion: Mock your api's in tests, instead of hitting it directly.建议:在测试中模拟你的 api,而不是直接点击它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.