Jest编写React组件单元测试时无法读取正确state值问题排查

你调用wrapper.state()获取状态失败的核心原因是你渲染的组件结构和预期不符：

• 你代码中默认导出的是经过Redux connect 方法包裹生成的高阶组件，而非你定义的MyComponent本身
• 测试代码中你将高阶组件包裹在Provider内渲染，此时mount返回的wrapper根节点是Provider组件，下层是Redux生成的Connect高阶组件，二者都没有你定义的expandModal状态，直接调用wrapper.state()自然拿不到对应字段。

方案1：直接测试未被connect包裹的原始组件（推荐用于单元测试） #

你已经在代码中通过export class MyComponent导出了原始组件，测试时直接导入该命名导出即可，无需引入Provider和mock store，测试逻辑更简洁：

// 导入命名导出的原始组件，而非默认导出的connect包裹组件
import { MyComponent } from './你的组件文件路径';

it("closing modal sets state to false", function () {
    // 直接渲染原始组件，无需Provider包裹
    const wrapper = mount(<MyComponent />);

    const button = wrapper.find("#show-modal-button").first();
    button.simulate("click");

    const modal = wrapper.find(Modal);
    expect(modal.prop("show")).toBe(true);
    modal.invoke("onHide")();
    // 此时wrapper直接对应MyComponent实例，可以正常获取状态
    expect(wrapper.state("expandModal")).toBe(false);
});

方案2：测试connect包裹的组件时，先定位到原始组件实例 #

如果你需要测试和Redux关联的逻辑必须渲染connect后的组件，只需要修改断言部分，先定位到MyComponent节点再获取状态：

// 此处导入的是默认导出的connect包裹组件
import MyComponent from './你的组件文件路径';
// 同时导入原始组件用于节点查找
import { MyComponent as RawMyComponent } from './你的组件文件路径';

it("closing modal sets state to false", function () {
    const wrapper = mount(<Provider store={store}>
        <MyComponent/>
    </Provider>);

    const button = wrapper.find("#show-modal-button").first();
    button.simulate("click");

    const modal = wrapper.find(Modal);
    expect(modal.prop("show")).toBe(true);
    modal.invoke("onHide")();
    // 先找到原始MyComponent节点再获取状态
    expect(wrapper.find(RawMyComponent).state("expandModal")).toBe(false);
});

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