如何使用Enzyme测试嵌套的Redux连接组件？

嘿，我来帮你搞定嵌套Redux连接组件的测试问题！看你的场景——App通过Provider提供store，Main组件里还套着连接Redux的Container组件，这里给你两套实用的测试方案，适配不同的测试需求：

首先先把你提供的App代码格式化完整（补全了被截断的部分）：

import React, { Component } from 'react';
import Main from './components/Main';
import './App.css';
import { Provider } from 'react-redux'
import createStore from './redux'
import applyConfigSettings from './config'

// Apply config overrides
applyConfigSettings()
const store = createStore()

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Main />
      </Provider>
    )
  }
}

export default App;

这种方式适合验证组件和真实Redux流程的交互是否正常，更贴近生产环境的运行逻辑。假设你用Jest+React Testing Library，测试代码可以这么写：

import React from 'react';
import { render, screen } from '@testing-library/react';
import App from './App';
import { Provider } from 'react-redux';
import createStore from './redux';

describe('嵌套Redux连接组件测试', () => {
  let store;

  // 每次测试前创建全新的store，避免不同测试间的状态污染
  beforeEach(() => {
    store = createStore();
  });

  test('Main和Container组件能正确渲染Redux状态', () => {
    render(
      <Provider store={store}>
        <App />
      </Provider>
    );

    // 这里替换成你的Container组件实际渲染的内容，比如从store取的用户名
    expect(screen.getByText('Welcome, Test User')).toBeInTheDocument();
  });
});

如果只是想单独验证组件的渲染逻辑，不想依赖真实的reducer和store，可以用redux-mock-store来模拟状态，测试速度更快也更独立。

首先先安装依赖：

npm install redux-mock-store --save-dev

然后写测试代码：

import React from 'react';
import { render, screen } from '@testing-library/react';
import Main from './components/Main';
import { Provider } from 'react-redux';
import configureMockStore from 'redux-mock-store';

// 初始化mock store生成器
const mockStore = configureMockStore();

describe('Main组件嵌套连接Container的测试', () => {
  test('能根据mock的Redux状态正确渲染Container', () => {
    // 模拟你需要的初始状态，和你的Redux state结构对应
    const initialState = {
      user: { name: 'Mock User' },
      // 其他需要的state字段
    };

    const store = mockStore(initialState);

    render(
      <Provider store={store}>
        <Main />
      </Provider>
    );

    // 断言Container是否正确展示了mock状态里的内容
    expect(screen.getByText('Welcome, Mock User')).toBeInTheDocument();
  });
});

• 如果单独测试Container组件，同样要用Provider包裹它，或者你也可以mockconnect方法，但更推荐前者，因为更贴近真实使用场景。
• 组件测试别重复造轮子：Redux本身的reducer、action逻辑应该单独测试，组件测试只需要关注「给定某个状态，组件是否正确渲染」「用户交互是否触发对应的action」就够了。
• 如果你的createStore用到了中间件（比如redux-thunk），在配置mock store的时候也要加上对应的中间件，比如configureMockStore([thunk])。

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