如何用React Testing Library的findByText()测试元素不在文档中？

先纠正你代码里的问题，再给出正确的测试实现：

核心问题梳理 #

你当前的代码存在几个明显错误：

1. screen.findByText() 的参数必须是文本内容或文本匹配规则，不能直接传入组件 <TodoAsync />，这属于API用法错误。
2. 测试描述和断言逻辑完全矛盾：描述写的是"加载时应该显示"，但断言却是"不在文档中"，逻辑完全颠倒。
3. 没有模拟组件的加载状态：要测试Promise等待状态，必须先让异步操作处于pending状态，才能触发组件的加载逻辑。

正确测试代码示例 #

假设你的 <TodoAsync> 组件在加载时不会渲染核心内容（或自身完全不渲染），可以这样写测试：

import { screen, render } from '@testing-library/react';
import TodoAsync from './TodoAsync';

// Mock异步请求，让它处于永久pending状态，模拟加载中
jest.mock('./your-api-module', () => ({
  fetchTodoData: () => new Promise(() => {}),
}));

describe('<TodoAsync>', () => {
  it('should not exist in the document when loading', async () => {
    render(<TodoAsync />);
    
    // 用queryBy*做同步查询，找不到元素时返回null，适合否定断言
    // 替换成你组件实际要检测的文本或标识
    const todoContent = screen.queryByText('待办事项列表');
    expect(todoContent).not.toBeInTheDocument();

    // 如果要检测组件根元素不渲染，可以给组件加data-testid属性
    // const todoComponent = screen.queryByTestId('todo-async-root');
    // expect(todoComponent).not.toBeInTheDocument();
  });
});

关键注意点 #

• 选对查询方法：queryBy* 用于同步查询，找不到元素返回null，是做否定断言的最佳选择；findBy* 是异步查询，用于等待元素出现的场景，用在否定断言里会超时报错。
• 必须模拟加载状态：只有通过mock让异步操作处于pending，才能确保组件确实处于你要测试的"等待Promise完成"状态。
• 明确断言目标：提前确定是要测试组件的某段内容不显示，还是组件自身完全不渲染，对应不同的查询策略。

内容的提问来源于stack exchange，提问作者chrisl-921fb74d