React生产构建act(...)不支持：RTL渲染代码报错及自定义render问询

完全可以自定义一个简化版的render函数，模拟RTL的核心渲染和查询功能，避开内部的act()调用，适配生产环境的React构建。

核心思路 #

RTL的render本质是把组件挂载到DOM，并提供便捷的DOM查询方法，而报错的根源是它内部为测试环境封装的act()。在生产环境中，React会自动处理组件的渲染和更新，不需要act()，因此我们可以直接用React的原生挂载API实现渲染，再手动实现常用的查询方法。

自定义render实现代码 #

import React from 'react';
import { createRoot } from 'react-dom/client';

// 复用挂载容器，避免重复创建DOM节点
let rootContainer;

export function customRender(ui, options = {}) {
  // 优先使用传入的容器，否则创建新容器并添加到body
  rootContainer = options.container || document.createElement('div');
  if (!options.container) {
    document.body.appendChild(rootContainer);
  }

  // 用React 18的createRoot完成组件挂载
  const root = createRoot(rootContainer);
  root.render(ui);

  // 模拟RTL常用查询方法
  const queries = {
    // 根据文本查找元素
    getByText: (text, options = {}) => {
      const matcher = typeof text === 'string' 
        ? node => node.textContent.trim() === text.trim()
        : text;
      
      const elements = Array.from(rootContainer.querySelectorAll('*'));
      const match = elements.find(element => matcher(element));
      
      if (!match) {
        throw new Error(`未找到包含文本 "${text}" 的元素`);
      }
      return match;
    },
    // 根据data-testid查找元素
    getByTestId: (testId) => {
      const element = rootContainer.querySelector(`[data-testid="${testId}"]`);
      if (!element) {
        throw new Error(`未找到data-testid为 "${testId}" 的元素`);
      }
      return element;
    },
    // 根据role查找元素
    getByRole: (role, options = {}) => {
      let elements = Array.from(rootContainer.querySelectorAll(`[role="${role}"]`));
      
      if (options.name) {
        const nameMatcher = typeof options.name === 'string'
          ? node => node.textContent.trim() === options.name.trim()
          : options.name;
        elements = elements.filter(element => nameMatcher(element));
      }
      
      if (elements.length === 0) {
        const nameMsg = options.name ? ` 且名称为 "${options.name}"` : '';
        throw new Error(`未找到role为 "${role}"${nameMsg} 的元素`);
      }
      return elements[0];
    }
  };

  // 返回与RTL结构类似的结果，包含容器、卸载方法和查询方法
  return {
    container: rootContainer,
    unmount: () => root.unmount(),
    ...queries
  };
}

使用方式 #

和RTL的用法基本一致，直接替换导入和调用即可：

// 替换原来的RTL导入
// import { render } from '@testing-library/react';
import { customRender } from './customRender';
import Counter from './Counter';
import { Provider } from 'react-redux';
import store from './store';

// 带Redux Provider的渲染示例
const { getByText, unmount } = customRender(
  <Provider store={store}>
    <Counter />
  </Provider>
);

// 查找元素并进行交互（直接用原生DOM事件）
const incrementBtn = getByText('Increment');
incrementBtn.click();

// 组件不再使用时卸载
// unmount();

注意事项 #

1. 这个自定义函数只实现了RTL的核心查询功能，像waitFor、fireEvent这类测试专属的异步/交互工具，可以用原生API替代：
   • 异步更新可以用setTimeout或监听组件状态变化；
   • 交互直接调用DOM元素的原生方法（如click()、input.value = 'xxx'; input.dispatchEvent(new Event('change'))）。
2. 生产环境中无需担心更新同步问题，React会自动处理所有渲染和更新流程，不需要act()。
3. 如果需要更多RTL的查询方法（如getByLabelText），可以参照上述逻辑扩展queries对象。

内容的提问来源于stack exchange，提问作者Daniel