React测试：如何在测试文件中设置组件内部的state状态值

你需要测试的是内部依赖isBlocked状态做条件渲染的React组件，分别对应Enzyme、React Testing Library两种测试工具的实现方法如下：

一、基于Enzyme的实现 #

你提供的测试用例中，修改内部状态的位置可以按照两种场景处理：

1. 推荐方案：模拟用户交互（贴合实际使用场景） #

如果isBlocked的状态变更由特定用户操作触发（比如点击开关、提交表单等），直接模拟该操作即可，测试逻辑更健壮，不会因为组件内部状态命名变更失效：

describe('rendering DiffWindow', () => {
    it("renders HeaderBar components without crash", () => {
        const wrapper = shallow( <HeaderBar /> );
        // 示例：假设点击id为toggle-block的按钮会将isBlocked设为true
        wrapper.find('#toggle-block').simulate('click');
        // 状态变更后更新渲染
        wrapper.update();
      
        expect(wrapper.find('.header-is-there').exists()).toBeTruthy();
    });
});

2. 特殊场景：直接修改内部状态 #

如果确实需要跳过交互直接修改状态，可使用Enzyme提供的状态操作方法：

describe('rendering DiffWindow', () => {
    it("renders HeaderBar components without crash", () => {
        const wrapper = shallow( <HeaderBar /> );
        // 方式1：直接调用setState（适用于Enzyme 3.10+版本）
        wrapper.setState({ isBlocked: true });
        // 方式2：如果方式1无效，可直接调用状态更新函数
        // wrapper.invoke('setIsBlocked')(true);
        wrapper.update();
      
        expect(wrapper.find('.header-is-there').exists()).toBeTruthy();
    });
});

二、基于React Testing Library的实现 #

React Testing Library本身不推荐直接操作组件内部状态，完全遵循模拟用户真实操作的思路，示例代码如下：

import { render, screen, fireEvent } from '@testing-library/react';
import HeaderBar from './HeaderBar';

describe('rendering DiffWindow', () => {
    it("renders HeaderBar components without crash", () => {
        render(<HeaderBar />);
        // 模拟用户点击触发状态变更的按钮，比如按钮文本为「开启阻塞」
        fireEvent.click(screen.getByRole('button', { name: /开启阻塞/i }));
        // 断言对应元素存在
        expect(screen.querySelector('.header-is-there')).toBeInTheDocument();
    });
});

额外优化建议 #

如果该状态后续可能会扩展为父组件传入的控制属性，建议直接将isBlocked提升为props，测试时直接传参即可，不需要处理内部状态：

// 渲染时直接传入控制属性
const wrapper = shallow(<HeaderBar isBlocked={true} />);

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