React、Redux新手求助：能否同时导入连接与未连接组件做Enzyme测试？

当然可以这么做！这其实是测试Redux连接组件时非常推荐的做法，既能单独验证组件自身的逻辑（不依赖Redux store），也能测试完整连接后的组件与Redux的交互行为。

为什么这种导入方式可行？ #

核心原因是你的App.js文件里应该同时存在命名导出的未连接组件和默认导出的连接后组件，示例代码大概是这样的：

// App.js
import React from 'react';
import { connect } from 'react-redux';

// 命名导出未连接的原始组件
export const App = ({ somePropFromRedux }) => {
  return <div>{somePropFromRedux}</div>;
};

// 映射Redux状态到组件props
const mapStateToProps = (state) => ({
  somePropFromRedux: state.someValue
});

// 默认导出经过connect包装的组件
export default connect(mapStateToProps)(App);

这样你用import ConnectedApp, { App } from '../App';就能同时导入两个组件，完全符合ES模块的导出规则，没有任何问题。

如何用这两个组件编写测试？ #

1. 测试未连接的App组件（浅层渲染）

这种测试不需要Redux store，你可以直接传递模拟的props来验证组件的渲染和逻辑，用Enzyme的shallow非常合适：

import { shallow } from 'enzyme';
import { App } from '../App';

describe('Unconnected App Component', () => {
  it('正确渲染传入的props内容', () => {
    const mockProps = { somePropFromRedux: '测试值' };
    const wrapper = shallow(<App {...mockProps} />);
    expect(wrapper.text()).toContain('测试值');
  });
});

这种测试专注于组件本身的逻辑，不用关心Redux的状态管理，执行速度快且容易维护。

2. 测试ConnectedApp组件（完整DOM渲染）

如果你想验证组件与Redux store的交互（比如状态更新后组件是否同步渲染），可以用Enzyme的mount，同时需要配置一个测试用的模拟Redux store：

import { mount } from 'enzyme';
import { Provider } from 'react-redux';
import configureStore from 'redux-mock-store';
import ConnectedApp from '../App';

const mockStore = configureStore([]);

describe('Connected App Component', () => {
  let store;

  beforeEach(() => {
    // 创建带有初始状态的模拟store
    store = mockStore({
      someValue: '来自store的测试值'
    });
  });

  it('正确渲染store中的状态内容', () => {
    const wrapper = mount(
      <Provider store={store}>
        <ConnectedApp />
      </Provider>
    );
    expect(wrapper.text()).toContain('来自store的测试值');
  });
});

这里用redux-mock-store创建模拟store，配合react-redux的Provider组件，让连接后的组件能获取到store状态，从而测试组件与Redux的集成效果。

总结 #

这种导入方式不仅完全可行，还是Redux组件测试的最佳实践之一：通过拆分测试关注点，分别验证组件自身逻辑和它与Redux的集成，让你的测试更清晰、更可靠。

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