在测试时,导致React状态更新的代码应该被 Package 到act(...)中-使用简单的react-native嵌套screen/components和jest axios

kfgdxczn  于 2023-05-04  发布在  Jest
关注(0)|答案(3)|浏览(194)

我是单元测试/jest的新手,但我知道一些关于react native的知识。我想为我的HomeScreen编写一个测试,它包含一个发出简单请求的组件。代码运行时没有任何问题,但当我用Jest运行它时失败了。

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

import { render } from '@testing-library/react-native'
import HomeScreen from '@screens/HomeScreen'

it('should run', async () => {
    const { getByText } = await render(<HomeScreen />)
})

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

我试着弄清楚为什么它一直说我应该在行动中 Package 它,我到底需要 Package 什么?我已经尝试 Package 渲染整行,但没有成功。
测试是一个简单的axios.get
我一直得到的错误是:

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
lf3rwulv

lf3rwulv1#

几天前我和fireEvent发生了这种情况。试试这个:

await waitFor(()=> render(<HomeScreen />))
ncgqoxb0

ncgqoxb02#

你面临这个问题的原因是因为正在发生的状态变化。在第一次渲染时,apiResponse数据被设置为null。稍后,对于API响应,apiResponse有一个值,因此发生了重新渲染,因此jest会抱怨它。
要解决这个问题,可以使用await waitFor(() => expect(api).toHaveBeenCalledTimes(1))。这将等待一段特定的时间。

  • 建议:在测试中模拟你的API,而不是直接攻击它。
6l7fqoea

6l7fqoea3#

我需要在waitFor函数中进行异步回调,修复了我的问题:

await waitFor(**async** () => render(<App />))

相关问题