React+Redux测试：无法调用Provider包裹组件的componentDidMount方法

嘿，我来帮你搞定这个问题！你的核心问题在于你现在操作的是Provider组件的实例，而不是你要测试的ConnectedComponent，所以调用wrapper.instance().componentDidMount()根本不会触发目标组件的生命周期方法。

为什么原来的代码不行？ #

当你用mount(<Provider store={store}><ConnectedComponent /></Provider>)时，返回的wrapper对应的根组件是Provider，而不是你的ConnectedComponent。这时候wrapper.instance()拿到的是Provider的实例，调用它的componentDidMount自然和你的组件毫无关系。

解决方案一：找到目标组件的实例 #

你需要先从wrapper中定位到ConnectedComponent，再获取它的实例调用方法：

import React from 'react'
import {expect} from 'chai'
import {mount} from 'enzyme'
import { reducer as formReducer } from 'redux-form'
import { createStore, combineReducers } from 'redux'
import { Provider } from 'react-redux'
import ConnectedComponent from '../../../src/components/Component'

describe('Component <Component />', () => {
  let store = createStore(combineReducers({ form: formReducer }))
  let wrapper = mount(<Provider store={store}><ConnectedComponent /></Provider>)
  
  // 先找到ConnectedComponent的实例
  const targetComponent = wrapper.find(ConnectedComponent).instance()
  // 调用它的componentDidMount
  targetComponent.componentDidMount()
  
  it('should load select input on component mount', () => {
    expect(wrapper.find('select option')).to.have.length(12)
  })
})

解决方案二：测试未连接的原始组件（更推荐） #

其实测试Redux连接组件时，更优雅的方式是单独测试未被connect包裹的原始组件，这样不需要引入Provider，测试逻辑更简洁，也更容易隔离依赖。

步骤如下：

1. 在你的组件文件中，导出未连接的原始组件：

// src/components/Component.js
import { connect } from 'react-redux'

class ActualComponent extends React.Component {
  componentDidMount() {
    // 你的REST请求逻辑
  }
  render() {
    // 渲染逻辑
  }
}

// 导出连接后的组件（原默认导出）
export default connect(mapStateToProps)(ActualComponent)
// 额外导出未连接的原始组件
export { ActualComponent }

2. 在测试文件中导入这个未连接的组件，直接测试：

import React from 'react'
import {expect} from 'chai'
import {mount} from 'enzyme'
import sinon from 'sinon'
import { ActualComponent } from '../../../src/components/Component'

describe('Component <ActualComponent />', () => {
  // 模拟组件需要的props（比如来自Redux的state或dispatch）
  const mockProps = {
    // 根据你的组件需求定义
  }
  
  let wrapper = mount(<ActualComponent {...mockProps} />)
  wrapper.instance().componentDidMount()
  
  it('should load select input on component mount', () => {
    expect(wrapper.find('select option')).to.have.length(12)
  })
})

额外提示：处理异步请求 #

如果你的componentDidMount中包含异步REST请求，测试时需要等待异步操作完成才能断言结果。可以用async/await或者测试框架的异步支持：

it('should load select input on component mount', async () => {
  await wrapper.instance().componentDidMount() // 假设方法返回Promise
  expect(wrapper.find('select option')).to.have.length(12)
})

或者用sinon的fake timers来模拟时间流逝，避免真实的网络请求延迟。

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