如何用JEST编写useState控制条件渲染元素的单元测试用例

• 你的Sample组件初始show状态为false，Welcome文本默认不会渲染到DOM中，测试用例在组件刚渲染完成就直接查询该元素，必然无法匹配到对应节点
• 另外你的测试代码里toBeInTheDocument是断言函数，遗漏了调用括号()，就算元素存在也会导致断言失败

需要覆盖两个核心逻辑场景：初始状态无Welcome文本、点击按钮后正常展示文本。你需要先从@testing-library/react引入测试所需的工具函数，修改后的Sample.test.js代码如下：

import Sample from '../components/sample';
import React from "react";
// 引入测试工具
import { render, screen, fireEvent } from '@testing-library/react';
// 引入jest-dom的断言扩展
import '@testing-library/jest-dom';

test('初始状态不渲染Welcome文本', () => {
  render(<Sample />);
  // 校验初始状态不存在该元素，用queryBy找不到时返回null不会直接抛错
  const titleElement = screen.queryByText(/Welcome!!/)
  expect(titleElement).not.toBeInTheDocument();
})

test('点击按钮后渲染Welcome文本，再次点击隐藏', () => {
  render(<Sample />);
  // 找到触发显示的按钮
  const toggleBtn = screen.getByRole('button', { name: /Show text/i });
  // 模拟点击按钮
  fireEvent.click(toggleBtn);
  // 此时状态更新，Welcome已渲染
  const titleElement = screen.getByText(/Welcome!!/)
  expect(titleElement).toBeInTheDocument();
  // 可选：校验再次点击后文本消失
  fireEvent.click(screen.getByRole('button', { name: /Hide Text/i }));
  expect(screen.queryByText(/Welcome!!/)).not.toBeInTheDocument();
})

• 判断元素不存在的场景要使用queryBy*系列查询方法，getBy*找不到元素会直接抛出错误，无法用于不存在的断言
• 状态更新触发的DOM渲染需要先模拟对应的用户交互（比如这里的点击按钮），再做节点查询和断言
• 所有断言方法需要正确调用（加括号），否则会出现假阳性的测试结果

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