React Jest测试三元运算符条件渲染组件的用例编写求助

你的TestCom组件有三个分支逻辑需要覆盖：

• 参数value为"A"时渲染ComB
• 参数value为"B"时渲染ComC
• 参数value为其他值（或不存在）时无组件渲染

现有测试的问题是直接渲染了ComB组件，而非测试TestCom的路由参数判断逻辑，所以覆盖率仅50%。以下是完整的测试用例，需要借助MemoryRouter来模拟路由上下文（因为useParams必须在路由组件的上下文中使用）：

首先确保导入所需依赖：

import { render, screen } from '@testing-library/react';
import { MemoryRouter, Route } from 'react-router-dom';
import TestCom from './TestCom';
import ComB from './ComB';
import ComC from './ComC';

测试用例1：参数value为"A"时渲染ComB #

it('renders ComB when parameter value is "A"', () => {
  render(
    <MemoryRouter initialEntries={['/test?value=A']}>
      <Route path="/test">
        <TestCom />
      </Route>
    </MemoryRouter>
  );
  // 可通过组件的测试id或唯一文本断言，这里假设组件有data-testid属性
  expect(screen.getByTestId('com-b')).toBeInTheDocument();
});

测试用例2：参数value为"B"时渲染ComC #

it('renders ComC when parameter value is "B"', () => {
  render(
    <MemoryRouter initialEntries={['/test?value=B']}>
      <Route path="/test">
        <TestCom />
      </Route>
    </MemoryRouter>
  );
  expect(screen.getByTestId('com-c')).toBeInTheDocument();
});

测试用例3：参数value为其他值或不存在时无组件渲染 #

it('renders nothing when parameter value is not "A" or "B"', () => {
  // 测试value为"C"的场景
  render(
    <MemoryRouter initialEntries={['/test?value=C']}>
      <Route path="/test">
        <TestCom />
      </Route>
    </MemoryRouter>
  );
  expect(screen.queryByTestId('com-b')).not.toBeInTheDocument();
  expect(screen.queryByTestId('com-c')).not.toBeInTheDocument();

  // 测试参数不存在的场景
  render(
    <MemoryRouter initialEntries={['/test']}>
      <Route path="/test">
        <TestCom />
      </Route>
    </MemoryRouter>
  );
  expect(screen.queryByTestId('com-b')).not.toBeInTheDocument();
  expect(screen.queryByTestId('com-c')).not.toBeInTheDocument();
});

额外优化：用jest.mock简化断言 #

如果不想依赖组件内部的测试id，可以提前mock子组件：

jest.mock('./ComB', () => () => <div data-testid="com-b" />);
jest.mock('./ComC', () => () => <div data-testid="com-c" />);

这样测试时直接通过测试id查询即可，无需关心子组件内部实现。

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