React & React本地测试库等待由挂载上的useEffect引起的异步状态更新

Question

我似乎无法让这个简单的测试在react-testing-library & react-native-testing-library中工作。我尝试过用act包装呈现函数的各种组合，或者使用waitFor和其他异步实用程序，但是在useEffect导致异步api调用设置新状态后，测试从不等待组件重新呈现。

同样值得注意的是，我收到了警告：An update to TestComponent inside a test was not wrapped in act(...).`。我知道这个问题，但没有办法解决这个问题。

import React, { useEffect, useState } from 'react'
import { View, Text } from 'react-native'
import { render, waitFor } from 'test-utils'
import { rest } from 'msw'
import { setupServer } from 'msw/node'
import { useApi } from './index'

const server = setupServer(
  rest.get('http://localhost/MOCK_VAR/some-endpoint', (req, res, ctx) => {
    return res(ctx.json({ greeting: 'hello there' }))
  })
)

beforeAll(() => server.listen())
afterEach(() => server.resetHandlers())
afterAll(() => server.close())

function TestComponent() {
  const { apiRequest } = useApi()
  const [result, setResult] = useState(null)

  useEffect(() => {
    makeApiCall()
  })

  const makeApiCall = async () => {
    const apiResult = await apiRequest({ url: '/some-endpoint' })
    console.log(apiResult.greeting) // <-- 'hello there'
    setResult(apiResult.greeting)
  }

  return (
    <View>
      <Text>{result}</Text>
    </View>
  )
}

describe('Test useApi hook', () => {
  test('test post request', async () => {
    const { findByText } = render(<TestComponent />)
    const greeting = await findByText('hello there')
    await waitFor(() => { // <-- never waits
      expect(greeting).toBeTruthy()
    })
  })
})

Answer 1

我的问题是等待findBy函数。从文档中可以看出，findBy*方法已经内置了waitFor。因此，简单地删除await就解决了这个问题。

什么对我有用：

  test('test post request', async () => {
    const { findByText } = render(<TestComponent />)
    const greeting = findByText('hello there')
    waitFor(() => expect(greeting).toBeTruthy())
  })