如何为条件语句编写测试用例？附React组件条件逻辑代码示例

首先明确你这个组件的三个核心逻辑分支：

1. API请求成功（usersApiSuccess=true）且用户ID存在（users.id≠null）→ 渲染<Dashboard />
2. 用户ID为null（无论API成功与否）→ 渲染带指定文案的<ErrorPage />
3. API请求失败且用户ID存在→ 不渲染任何内容

准备工作 #

先确保安装React测试库相关依赖：

npm install --save-dev @testing-library/react @testing-library/jest-dom

另外，为了方便测试，建议把组件改成接收props的形式（如果原组件是从上下文或自定义hooks取数据，测试时可以通过mock hooks或传递props控制状态）：

// 调整后的组件示例
const SomeComponent = ({ usersApiSuccess, users }) => {
  return (
    <>
      {(usersApiSuccess && users.id !== null) ?
        <Dashboard />
        : (users.id === null) &&
        <ErrorPage content="User does not exist" />}
    </>
  )
}

编写测试用例 #

创建SomeComponent.test.js文件，写入以下测试代码：

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

// 模拟子组件，避免测试耦合子组件内部实现
jest.mock('./Dashboard', () => () => <div data-testid="dashboard" />);
jest.mock('./ErrorPage', () => ({ content }) => <div data-testid="error-page">{content}</div>);

describe('SomeComponent', () => {
  // 测试API成功且用户ID存在的场景
  test('renders Dashboard when API succeeds and user ID exists', () => {
    render(<SomeComponent usersApiSuccess={true} users={{ id: 123 }} />);
    expect(screen.getByTestId('dashboard')).toBeInTheDocument();
    expect(screen.queryByTestId('error-page')).not.toBeInTheDocument();
  });

  // 测试用户ID为null的场景（覆盖API成功/失败两种情况）
  test('renders ErrorPage when user ID is null', () => {
    // API成功但用户ID为null
    render(<SomeComponent usersApiSuccess={true} users={{ id: null }} />);
    expect(screen.getByTestId('error-page')).toHaveTextContent('User does not exist');
    expect(screen.queryByTestId('dashboard')).not.toBeInTheDocument();

    // API失败且用户ID为null
    render(<SomeComponent usersApiSuccess={false} users={{ id: null }} />);
    expect(screen.getByTestId('error-page')).toHaveTextContent('User does not exist');
    expect(screen.queryByTestId('dashboard')).not.toBeInTheDocument();
  });

  // 测试API失败且用户ID存在的场景
  test('renders nothing when API fails and user ID exists', () => {
    const { container } = render(<SomeComponent usersApiSuccess={false} users={{ id: 123 }} />);
    expect(container.firstChild).toBeNull();
  });
});

关键注意点 #

• 用jest.mock模拟子组件：只关注当前组件的条件渲染逻辑，不被子组件内部实现干扰
• 用data-testid标记元素：比文本查询更稳定，避免文案改动导致测试失败
• 覆盖所有分支：不要漏掉任何逻辑组合，确保每种条件下的渲染结果符合预期
• 断言方式：getByTestId用于确认元素存在（找不到直接报错），queryByTestId用于确认元素不存在（找不到返回null）

内容的提问来源于stack exchange，提问作者A. K.