act

await act(async actFn)

要为断言准备组件，请将渲染组件和执行更新的代码包装在 await act() 调用中。这使您的测试更接近 React 在浏览器中的工作方式。

• 参考
  • await act(async actFn)
• 用法
  • 在测试中渲染组件
  • 在测试中分发事件
• 故障排除
  • 我收到一个错误：“当前测试环境未配置为支持 act”(…)”

await act(async actFn)

在编写UI测试时，渲染、用户事件或数据获取等任务可以被视为与用户界面的“交互单元”。React提供了一个名为 act() 的辅助函数，它确保在进行任何断言之前，与这些“单元”相关的全部更新都已处理并应用于DOM。

名称 act 来自于 Arrange-Act-Assert 模式。

it ('renders with button disabled', async () => {
  await act(async () => {
    root.render(<TestComponent />)
  });
  expect(container.querySelector('button')).toBeDisabled();
});

act 不返回任何值。

在测试组件时，可以使用 act 对其输出进行断言。

例如，假设我们有这个 Counter 组件，下面的用法示例展示了如何测试它

function Counter() {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount(prev => prev + 1);
  }

  useEffect(() => {
    document.title = `You clicked ${this.state.count} times`;
  }, [count]);

  return (
    <div>
      <p>You clicked {this.state.count} times</p>
      <button onClick={this.handleClick}>
        Click me
      </button>
    </div>
  )
}

测试中渲染组件

要测试组件的渲染输出，请将渲染包裹在 act() 中。

import {act} from 'react';
import ReactDOMClient from 'react-dom/client';
import Counter from './Counter';

it('can render and update a counter', async () => {
  container = document.createElement('div');
  document.body.appendChild(container);
  
  // ✅ Render the component inside act().
  await act(() => {
    ReactDOMClient.createRoot(container).render(<Counter />);
  });
  
  const button = container.querySelector('button');
  const label = container.querySelector('p');
  expect(label.textContent).toBe('You clicked 0 times');
  expect(document.title).toBe('You clicked 0 times');
});

在这里，我们创建一个容器，将其添加到文档中，并在 act() 内渲染 Counter 组件。这确保了组件已渲染且其效果已应用，然后再进行断言。

使用 act 确保在进行断言之前应用所有更新。

测试中分发事件

要测试事件，请将事件分发包裹在 act() 中。

import {act} from 'react';
import ReactDOMClient from 'react-dom/client';
import Counter from './Counter';

it.only('can render and update a counter', async () => {
  const container = document.createElement('div');
  document.body.appendChild(container);
  
  await act( async () => {
    ReactDOMClient.createRoot(container).render(<Counter />);
  });
  
  // ✅ Dispatch the event inside act().
  await act(async () => {
    button.dispatchEvent(new MouseEvent('click', { bubbles: true }));
  });

  const button = container.querySelector('button');
  const label = container.querySelector('p');
  expect(label.textContent).toBe('You clicked 1 times');
  expect(document.title).toBe('You clicked 1 times');
});

在这里，我们使用 act 渲染组件，然后在另一个 act() 中分发事件。这确保了在进行断言之前应用了事件的所有更新。

我收到一个错误：“当前测试环境未配置为支持 act(...)”