React Testing Library测试Cam组件Add/Update模式的问题

问题描述 #

我是React测试新手，正在通过编码学习。现有Cam.tsx组件，包含添加相机和修改相机的两个表单，点击对应图标时组件会通过props接收mode值切换模式。但使用React Testing Library测试时，测试Update功能却仍显示Add表单，请问如何测试这两种模式？

现有测试代码 #

describe("Testing component ", () => {
 
  
  const Camera = (): RenderResult =>
    render(
      <Provider store={store}>
        <Cam
          }}
        />{" "}
      </Provider>
    );

 

  test("Cam", () => {
    Camera();
    const name = screen.queryByTestId(/^AddName/i);
  
  });
});

现有Cam.tsx代码 #

const ADD = "ADD";

let [state, setState] = useState<State>({mode: ADD });

if (props.mode) {
state.mode = props.mode;
}

const option = state.mode;

return (
  <React.Fragment>
    <div data-testid="header">
      {option == ADD ? Add() : <></>}
      {option == UPDATE ? Update() : <></>}
    </div>
  </React.Fragment>

问题根源 #

你直接修改了useState返回的state对象，这违反了React状态更新的核心规则：绝对不能直接修改状态，必须通过setState方法更新。而且组件每次渲染时，useState会重新初始化状态，直接赋值state.mode = props.mode的操作既不会触发组件重渲染，也无法正确同步props到状态，导致模式切换失效。

修复组件代码 #

根据需求选择以下两种方案：

方案1：直接使用props（推荐，无需本地状态维护） #

如果mode仅由外部props控制，不需要本地修改，直接用props值即可：

const ADD = "ADD";
const UPDATE = "UPDATE"; // 补充原代码缺失的常量

// 默认使用ADD模式
const option = props.mode || ADD;

return (
  <React.Fragment>
    <div data-testid="header">
      {option === ADD ? <Add /> : null}
      {option === UPDATE ? <Update /> : null}
    </div>
  </React.Fragment>
);

方案2：用useEffect同步props到本地状态 #

如果需要在组件内部修改mode状态，通过useEffect监听props变化来更新：

import { useState, useEffect } from 'react';

const ADD = "ADD";
const UPDATE = "UPDATE";

const Cam = (props) => {
  // 初始化状态时优先使用props传入的mode
  const [state, setState] = useState<State>({ mode: props.mode || ADD });

  // 监听props.mode变化，同步更新本地状态
  useEffect(() => {
    if (props.mode) {
      setState(prev => ({ ...prev, mode: props.mode }));
    }
  }, [props.mode]);

  const option = state.mode;

  return (
    <React.Fragment>
      <div data-testid="header">
        {option === ADD ? <Add /> : null}
        {option === UPDATE ? <Update /> : null}
      </div>
    </React.Fragment>
  );
};

编写正确的测试代码 #

封装可复用的渲染函数，通过传递不同mode props分别测试两种模式：

import { render, screen } from '@testing-library/react';
import { Provider } from 'react-redux';
import Cam from './Cam';
import store from './store';

describe("Cam Component", () => {
  // 封装带自定义props的渲染函数
  const renderCam = (props = {}) => {
    return render(
      <Provider store={store}>
        <Cam {...props} />
      </Provider>
    );
  };

  test("渲染Add模式表单", () => {
    renderCam({ mode: "ADD" });
    // 验证Add表单元素存在
    expect(screen.getByTestId(/^AddName/i)).toBeInTheDocument();
    // 验证Update表单元素不存在
    expect(screen.queryByTestId(/^UpdateName/i)).not.toBeInTheDocument();
  });

  test("渲染Update模式表单", () => {
    renderCam({ mode: "UPDATE" });
    // 验证Update表单元素存在
    expect(screen.getByTestId(/^UpdateName/i)).toBeInTheDocument();
    // 验证Add表单元素不存在
    expect(screen.queryByTestId(/^AddName/i)).not.toBeInTheDocument();
  });

  test("默认渲染Add模式表单", () => {
    renderCam(); // 不传递mode
    expect(screen.getByTestId(/^AddName/i)).toBeInTheDocument();
  });
});

测试关键要点 #

• 用可复用渲染函数简化多props场景测试
• 用getByTestId验证存在的元素（找不到会报错，确保元素必现）
• 用queryByTestId验证不存在的元素（找不到不会报错，适合断言隐藏场景）
• 覆盖所有分支：Add模式、Update模式、默认模式

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