我们在做测试的时候，会时不时的遇到一个act问题，有的时候它不影响测试结果和覆盖率，有的时候会因为act的存在而导致一些原本可以拿到的渲染而断言失败。经常表现为如下错误：

console.error
  Warning: An update to ForwardRef(ImperativeCounter) 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 */

内容主要来自 肯特·多兹，不过可能时间比较久远（2020年）因此他的写法换成tsx和函数风格是跑不通的，因此我重新整理了一份，并对例子做出了调整。以下是几种可能遇到的场景：
地址：https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning

场景一

如何解决组件测试中触发的act问题？如何解决setState触发的act问题？
函数风格组件中，当异步程序中使用了setState函数是出现act问题，包括useState中的setState方法，一般发生在网络请求后执行
了一些值的改变，因此执行了setState方法。

解决方法：
将异步方法扔进act中，执行的结果扔到回调函数中，或者给act函数添加async，让函数异步执行，因此下面两种写法都可以
写法一：

await act(() => {
  return handleUpdateUsername().then(() => {
    expect(handleUpdateUsername).toHaveBeenCalled();
  })
})

写法二：

await act(async() => {  
  expect(handleUpdateUsername).toHaveBeenCalled();
  return handleUpdateUsername
})

例子
新建文件 com/username-form.tsx

import React, { useState } from 'react';

// interface

interface Option {
  status: string,
  error: any
}


export default function UsernameForm(
  {updateUsername}:
  {
    updateUsername: (username: string) => Promise<void>
  }
) {
  const [options,setOptions] = useState<Option>({
    status: 'idle',
    error: null
  })
  const [age,setAge] = useState(12);
  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const target  = event.target as typeof event.target & {
      username: string
    }
    const newUsername = target.username;
    setOptions({
      ...options,
      status: 'pending'
    })
    
    try {
      await updateUsername(newUsername);
      console.log('i am in')
      setAge(23);
      setOptions({
        ...options,
        status: 'fulfilled'
      })
    } catch (e) {
      setOptions({
        ...options,
        status: 'rejected',
        error: e
      })
    }
  }
  

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="username">Username</label>
      <input id="username" />
      <button type="submit">Submit</button>
      <div>{JSON.stringify(options)}</div>
      <div>my age is: {age}</div>
      <div>
        <span>{options.status === 'pending' ? 'Saving...' : null}</span>
        <span>{options.status === 'rejected' ? options?.error?.message : null}</span>
        <span>{options.status === 'fulfilled' ? '更新成功' : null}</span>
      </div>
    </form>
  )
}

然后新建测试 act/index.test.tsx

import * as React from 'react'
import user from '@testing-library/user-event';
import {render, screen, act, fireEvent} from '@testing-library/react';

import UsernameForm from 'src/page/act/com/username-form';

describe('test act',() => {
  

  test('calls updateUsername with the new username', async () => {
    const promise = () => Promise.resolve()
    const handleUpdateUsername = jest.fn(promise)
    const fakeUsername = 'sonicthehedgehog'

    render(<UsernameForm updateUsername={handleUpdateUsername} />)

    // 获取输入框
    const usernameInput = screen.getByLabelText(/username/i)
    // 注意了，user-event方法都是异步，因此最好加上await
    // 给输入框赋值
    // await user.type(usernameInput, fakeUsername)
    fireEvent.change(usernameInput,{
      target: {
        value: fakeUsername
      }
    })
    // 点击提交
    // await user.click(screen.getByText(/submit/i))
    

    // 如果提交成功，那么handleUpdateUsername方法将被执行
    // expect(handleUpdateUsername).toHaveBeenCalledWith(fakeUsername)
    
    fireEvent.click(screen.getByText(/submit/i));
    await act(() => {
      return handleUpdateUsername().then(() => {
        expect(handleUpdateUsername).toHaveBeenCalled();
      })
    })
    // await act(async() => {  
    //   expect(handleUpdateUsername).toHaveBeenCalled();
    //   return handleUpdateUsername
    // })
  })
})

可以尝试去掉act，然后跑测试进行复现问题

情景二：

为什么使用useReducer会触发act问题？如何解决useReducer中的act问题？
函数风格组件中，使用了useReducer，由于他会返回一个Dispatch，因此也存在一个setState，所以当它处于异步函数之后执行时时，测试会检测到组件有所更新。

解决方法：
找到对应的异步们，正如order-status.tsx中的checkStatus和setInterval，我们需要为他俩构造一个异步执行的环境需要注意的是setInterval的使用，就意味着测试需要开启假计时，而我们也是为这个假计时构造一个异步执行的环境
act(() => jest.advanceTimersByTime(1000) )
await act(async() => {
return expect(checkStatus).toBeCalled();
})
这里有一个注意点：假计时不是异步，因此不需要添加await，但是如果是异步，那么就需要添加await/async
例子：
我们新建文件 com/order-status.tst

import React, { useReducer,useEffect } from "react";
import { checkStatus } from './api';

export default function OrderStatus(
  {orderId}:
  {
    orderId: string
  }
) {
  const [{status, data, error}, setState] = useReducer(
    (s: any, a: any) => ({...s, ...a}) as any,
    {status: 'idle', data: null, error: null},
  )
  useEffect(() => {
    let current = true
    function tick() {
      // 这个位置会提示act问题
      setState({status: 'pending'})
      checkStatus(orderId).then(
        d => {
          // 这个位置也会出现act问题
          if (current) setState({status: 'fulfilled', data: d})
        },
        e => {
          if (current) setState({status: 'rejected', error: e})
        },
      )
    }
    const id = setInterval(tick, 1000)
    return () => {
      // 清除计时器
      current = false
      clearInterval(id)
    }
  }, [orderId]);
  return (
    // 效果为，一秒钟后，checkStatus成功返回数据，同时status=fulfilled，因此显示data.orderStatus
    <div>
        Order Status:{' '}
        <span>
            {status === 'idle' || status === 'pending'
            ? '...'
            : status === 'error'
            ? error.message
            : status === 'fulfilled'
            ? data.orderStatus
            : null}
        </span>
    </div>
  )
}

这个组件的意思是：一秒钟后，checkStatus成功返回数据，同时status=fulfilled，因此显示data.orderStatus
然后新建测试 act/order-status.test.tsx

import * as React from 'react'
import {render, act} from '@testing-library/react'
import * as api from '../../page/act/com/api';
import OrderStatus from 'src/page/act/com/order-status';

jest.mock('../../page/act/com/api');

const mockCheckStatus = jest.spyOn(api,'checkStatus') as jest.MockedFunction< typeof api.checkStatus>
mockCheckStatus.mockImplementation(
    jest.fn((id: string) => {
        return Promise.resolve({
            orderStatus: 'i am status123 => '+ id
        })
    })
)

beforeAll(() => {
  // we're using fake timers because we don't want to
  // wait a full second for this test to run.
  jest.useFakeTimers()
})

afterAll(() => {
  jest.useRealTimers()
})

test('polling backend on an interval', async () => {
  const orderId = 'abc123'
  const checkStatus = mockCheckStatus;

  const container = render(<OrderStatus orderId={orderId} />)

  //expect(screen.getByText(/\.\.\./i)).toBeInTheDocument()
  // advance the timers by a second to kick off the first request
  act(() => jest.advanceTimersByTime(1000) )
  await act(async() => {
    return expect(checkStatus).toBeCalled();
  })

//   expect(await screen.findByText(orderStatus)).toBeInTheDocument()

//   expect(checkStatus).toHaveBeenCalledWith(orderId)
  expect(checkStatus).toHaveBeenCalledTimes(1);

  expect(container).toMatchSnapshot();

})

注意这里的mock写法，和假计时的用法

情景三：

为什么使用hook会触发act问题？如何解决hook中触发的act问题？
当我们使用自定义hook的时候，使用到了setState，那么我们在测试这个hook的方法时会调用这个方法来做测试；此时会由于setState是异步情况，导致修改值不及时，从而expect断言不准确；为此，我们需要给触发的方法创建异步执行环境。

解决方案：

act(() => result.current.increment())
expect(result.current.count).toBe(1)

act(() => result.current.decrement())
expect(result.current.count).toBe(0)

举例
我们新建文件 com/hook/utils.tsx

import React , { useState} from 'react';

export default function useCount() {
  const [count,setCount] = useState(0);
  const increment = () => setCount(c => c + 1);
  const decrement = () => setCount(c => c - 1);
  return {
    count,
    increment,
    decrement
  }
}

然后新建测试文件 act/hook-counter.test.tsx

import * as React from 'react'
import {renderHook,act} from '@testing-library/react';
import useCount from 'src/page/act/com/hook/utils';

describe('test hook',() => {
  test('increment and decrement updates the count', () => {
    const {result} = renderHook(() => useCount())
    expect(result.current.count).toBe(0)
  
    act(() => result.current.increment())
    expect(result.current.count).toBe(1)

    act(() => result.current.decrement())
    expect(result.current.count).toBe(0)
  })
})

情景四：

为什么使用useImperativeHandle会触发act问题？如何解决useImperativeHandle中触发的act问题？
当我们使用了useImperativeHandle的时候，通过forwardRef给父组件传递一个ref，此时父组件的ref拿到的是一个对象并可以触发一些方法，如果这些方法中存在修改setState的情形，那么就会出现act问题，同时因为act会导致页面中本应该有的内容而无法通过jest api拿到，进而影响判断.

举例
我们新建文件 com/imperativeCount.tsx

import { useState,useImperativeHandle,forwardRef, Ref } from "react"

// eslint-disable-next-line react-refresh/only-export-components
function ImperativeCounter(props: any, ref: Ref<any> | undefined) {
  const [count, setCount] = useState(0)
  useImperativeHandle(ref, () => ({
    increment: () => setCount(c => c + 1),
    decrement: () => setCount(c => c - 1),
  }))
  return <div>The count is: {count}</div>
}

const ZlImperativeCounter = forwardRef(ImperativeCounter)

export default ZlImperativeCounter;

然后新建测试文件 act/hook-count.test.tsx

import * as React from 'react'
import {renderHook,act} from '@testing-library/react';
import useCount from 'src/page/act/com/hook/utils';


describe('test hook',() => {
  test('increment and decrement updates the count', () => {
    const {result} = renderHook(() => useCount())
    expect(result.current.count).toBe(0)
  
    act(() => result.current.increment())
    expect(result.current.count).toBe(1)

    act(() => result.current.decrement())
    expect(result.current.count).toBe(0)
  })
})

总结

从根源来看，是单元测试没有给setState创建异步执行的环境，虽然不影响测试结果，但由于抛出的是error级别的错误，因此需要处理。当出现act错误的时候，如果对其进行一些断言，那么该断言将无法实现预期效果。另外从以上四种场景来看，后面两种，如果是以组件形式的引入，其实并不一定会触发act问题，主要还是聚焦与前面两种。

以上内容可以到gitee上找到，大家可以复制出来看效果
组件地址：
https://gitee.com/xifeng-canyang/jest-formik/tree/master/src/page/act/com
对应测试：
https://gitee.com/xifeng-canyang/jest-formik/tree/master/src/__tests__/act

以上便是jest关于act的全部问题，实不相瞒，想要您一个赞～