如何测试React组件在两种不同state状态下的渲染是否正确

你可以直接通过Enzyme提供的setState方法手动修改组件状态，触发重新渲染后生成对应状态的快照，无需调整原组件逻辑。修改后的测试代码如下：

import React from 'react';
import { shallow } from 'enzyme';
import TheUIComponent from './TheUIClass';

let component;

beforeEach(() => {
    component = shallow(<TheUIComponent/>);
});

describe('UIComponent', () => {
    // 原有测试用例，校验state全为null时渲染空div
    it('should render empty div when state params are null', () => {
        expect(component).toMatchSnapshot();
    });

    // 新增测试用例，校验state全不为null时渲染完整UI
    it('should render full UI when all state params are not null', () => {
        // 手动设置state为非null的有效值，值可根据实际业务场景填写
        component.setState({
            one: 'mockValue1',
            two: 'mockValue2',
            three: 'mockValue3'
        });
        // 生成完整UI的快照
        expect(component).toMatchSnapshot();
        // 可选：额外加断言确认特定元素渲染正常，比快照更精准
        // expect(component.find('.your-target-class').exists()).toBe(true)
    });
});

补充说明 #

• 运行测试后会自动生成两份快照，分别对应两种状态的渲染结果，后续组件修改时两种场景都会被校验
• 如果你的组件state是在挂载后通过接口请求、props传入等方式赋值的，也可以对应模拟触发赋值逻辑：比如用jest模拟接口返回、给组件传入带值的props，再验证渲染结果
• 除了快照校验，你也可以增加针对特定UI元素的显式断言，避免快照冗余内容过多导致校验不精准的问题

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