如何在Jasmine单元测试中设置React函数式组件的State

目标组件代码 #

import React from 'react';

// 注：修复了原代码的语法错误
export const Bar = (props) => {
  const [myState, setMyState] = React.useState([]);

  const disableSubmit = React.useMemo(() => {
    return myState.length === 0
  }, [myState]);

  // 通过API调用获取数据并更新状态
  setMyState(getMyStateData());

  const onSubmit = () => {
    // 验证逻辑与API调用
  };
  
  return (
    <form
      className="form-wrapper"      
      onSubmit={event => props.onSubmit(event)}
    >
      {/* myState数据展示逻辑 */}
      <button className="btn custom-btn" type="submit" value="Submit" disabled={disableSubmit}>
        Submit
      </button>
    </form>
  );
}

问题描述 #

我正在使用Jasmine对上述函数式组件进行单元测试，想要编写测试用例模拟提交按钮的点击事件，但只有当myState被设置为长度大于0的数组时，按钮才会启用并执行提交逻辑。我尝试通过component.instance()设置myState，但报错提示component.instance()为undefined；也了解到setState仅适用于类组件，请问如何在单元测试中设置该函数式组件的myState值？

解决方法 #

函数式组件的内部状态是封装的，无法像类组件那样直接通过实例访问或修改，推荐从模拟数据源或测试真实交互流程入手，以下是两种可行方案：

1. 模拟数据获取函数返回非空数组 #

组件中myState的值来自getMyStateData()的调用，测试时直接mock这个函数，让它返回长度大于0的数组，组件渲染时myState会自动被设置为有效值，按钮也会随之启用。

示例测试代码：

import { Bar } from './Bar';
import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

describe('Bar Component', () => {
  beforeEach(() => {
    // Jasmine mock全局函数，返回非空数组
    spyOn(window, 'getMyStateData').and.returnValue([{ id: 1, name: 'test data' }]);
    
    // 如果getMyStateData是模块导出函数，替换为：
    // spyOn(require('./your-data-module'), 'getMyStateData').and.returnValue([{ id: 1 }]);
  });

  it('should enable submit button and trigger onSubmit when myState has data', () => {
    const mockOnSubmit = jasmine.createSpy('onSubmit');
    render(<Bar onSubmit={mockOnSubmit} />);

    // 确认按钮已启用
    const submitBtn = screen.getByText('Submit');
    expect(submitBtn).not.toBeDisabled();

    // 模拟点击提交按钮
    userEvent.click(submitBtn);

    // 验证提交回调被触发
    expect(mockOnSubmit).toHaveBeenCalled();
  });
});

2. 通过用户交互触发状态更新 #

如果myState是通过用户输入、选择等操作更新的（比如组件中有添加数据的输入框），测试时直接模拟这些用户行为，让组件自然更新状态，再测试提交按钮的功能。这种方式更贴近真实用户场景，测试可信度更高。

注意事项 #

• 避免直接修改函数式组件的内部状态，这违背组件封装原则，会让测试变得脆弱。
• 原组件存在两处语法问题：export const Bar()定义错误（需改为export const Bar = (props) =>）、未接收props参数，建议先修复再测试。

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