React Jest无断言渲染测试：getBy查询的最佳实践

@testing-library/react 提供了多种查询渲染元素的方法，其中getBy*系列查询如果找不到元素会直接抛出错误。当我们只需要测试某个元素是否在页面上渲染时，getBy*查询本身就能通过报错来验证，但这时测试代码里没有显式的断言。这种情况下，我们应该用expect(1).toBe(1)这类伪断言，还是有更优的最佳实践？

示例代码：

describe("MyComponent", () => {

  // 渲染辅助函数
  function renderer(props) {
    const result = render(<MyComponent {...props} />);

    // 当找不到文本为"My element"的元素时会抛出错误
    const element = screen.getByText("My element");

    return {...result, element};
  }

  it("渲染目标元素", () => {
    const {element} = renderer({});
   
    // 冗余代码：能走到这一步就说明元素已找到，断言必然通过
    expect(element).toBeInTheDocument();
  });

  // 效果相同，但没有使用断言
  it("渲染目标元素（无断言版）", () => {
    renderer({});

    // expect(1).toBe(1); // 加上这句伪断言，Jest就不会报错
  });
});

1. 别用伪断言，也别加冗余断言
   getBy*系列方法本身就是「断言式查询」——找不到目标元素直接抛错，测试直接失败。只要代码能顺利执行完renderer()调用不报错，就已经证明元素成功渲染了。expect(1).toBe(1)这种伪断言纯粹是浪费代码；expect(element).toBeInTheDocument()也是多余的，毕竟能走到这一步的前提就是元素已经被找到了。

2. 解决Jest的「缺少断言」警告
   如果Jest因为测试里没有显式expect语句而警告，有两种更合理的处理方式：

• 内联查询逻辑：把getBy*的查询直接写在测试用例里，而非封装在辅助函数中。这样Jest能更清晰地识别到测试的核心验证逻辑，多数版本会自动取消警告：

  it("渲染目标元素", () => {
    render(<MyComponent />);
    // 执行查询，找不到就报错，测试失败
    screen.getByText("My element");
  });
  

• 极简语义化断言：如果必须保留封装逻辑，且Jest仍警告，可以加一个贴合测试意图的极简断言替代伪断言：

  it("渲染目标元素", () => {
    const { element } = renderer({});
    expect(element).toBeTruthy();
  });
  

  虽然这也是冗余的，但比伪断言更有意义，也能让Jest停止警告。

3. 更严谨的显式写法：queryBy* + 断言
   如果你习惯传统测试「查询+断言」的显式结构，推荐改用queryBy*系列方法（找不到元素时返回null而非报错），配合toBeInTheDocument()断言：

it("渲染目标元素", () => {
  render(<MyComponent />);
  expect(screen.queryByText("My element")).toBeInTheDocument();
});

这种写法可读性更强，完全符合断言驱动的测试习惯，也不会触发Jest的警告，是很多团队认可的统一风格。

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