Reactjs 当Component.prototype返回未定义时，如何使用jest/Ezyme对componentDidMount进行单元测试？

我正在尝试编写一个简单的测试，以查看是否在下面的

主页
组件中调用
组件didmount
：

class HomePage extends Component {
  state = {...}
  async componentDidMount(){
    // a couple of if conditions and an ajax request
  }
}

对于测试，我将尝试以下操作，以查看是否调用componentDidMount：

describe('<Homepage/>', () => {
  let props, store, mockStore, initialState

  beforeEach(() => {
    props = {
      getPoints: jest.fn(),
      estimatePoints: jest.fn()
    }
    initialState = {
      homeReducer: {
        profile: {}
      },
      pointsReducer: {
        score: {
          points: {}
        }
      }
    }

    mockStore = configureStore()
    store = mockStore(initialState)
  })

  it('should call the componentDidMount lifecycle method', () => {
    const spy = jest.spyOn(HomePage.prototype, 'componentDidMount')
    const wrapper = mount(
      <Provider store={store}>
        <HomePage {...props}/>
      </Provider>
    )
    expect(spy).toHaveBeenCalled()
    wrapper.unmount()
  })
})

描述（“”，（）=>{
让道具、存储、模拟存储、初始状态
在每个之前（（）=>{
道具={
getPoints:jest.fn（），
估计点：jest.fn（）
}
初始状态={
homeReducer：{
档案：{}
},
指针减速器：{
分数：{
要点：{}
}
}
}
mockStore=configureStore（）
store=mockStore（initialState）
})
它（'应该调用componentDidMount生命周期方法'，（）=>{
const spy=jest.spyOn（HomePage.prototype，'componentDidMount'）
常量包装器=装入(
)
expect（spy）.tohavebeincalled（）
wrapper.unmount（）
})
})

我得到的错误是，
无法对原语值进行间谍；未定义的给定值
。我也尝试过使用
shallow
和
wrapper.instance（）
，但都没有成功。在这种情况下，测试
组件didmount
的正确方法是什么？
我确信您正在使用
connect
HOC的
react redux
包装
主页
react组件。您需要使用static属性来获取原始的react组件。然后，你可以监视它

简短答复:

constspy=jest.spyOn（HomePage.WrappedComponent.prototype，'componentDidMount'）；

完成的工作示例：

index.tsx
：

import React，{Component}来自'React'；
从'react redux'导入{connect}；
导出类主页扩展组件{
状态={}；
异步组件didmount（）{
log（“一对if条件和一个ajax请求”）；
}
render（）{
返回主页；
}
}
导出默认连接（）（主页）；

index.test.tsx
：

从“/”导入主页；
从“redux模拟存储”导入configureStore；
从“酶”导入{mount}；
从“React”导入React；
从'react redux'导入{Provider}；
描述（“”，（）=>{
让道具，存储，模拟存储，初始状态；
在每个之前（（）=>{
道具={
getPoints:jest.fn（），
估计点：jest.fn（），
};
初始状态={
homeReducer：{
档案：{}，
},
指针减速器：{
分数：{
要点：{}，
},
},
};
mockStore=configureStore（）；
store=mockStore（initialState）；
});
它（'应该调用componentDidMount生命周期方法'，（）=>{
const spy=jest.spyOn（HomePage.WrappedComponent.prototype，'componentDidMount'）；
常量包装器=装入(
,
);
期望（间谍）。已被调用（）；
wrapper.unmount（）；
});
});

单元测试结果：

通过src/stackoverflow/59759511/index.test.tsx（9.85s）
✓ 应调用componentDidMount生命周期方法（62ms）
console.log src/stackoverflow/59759511/index.tsx:7
几个if条件和一个ajax请求
测试套件：1个通过，共1个
测试：1项通过，共1项
快照：共0个
时间：10.983s

源代码：
我确信您正在使用
connect
HOC的
react-redux
包装
主页
react组件。您需要使用static属性来获取原始的react组件。然后，你可以监视它

简短答复:

constspy=jest.spyOn（HomePage.WrappedComponent.prototype，'componentDidMount'）；

完成的工作示例：

index.tsx
：

import React，{Component}来自'React'；
从'react redux'导入{connect}；
导出类主页扩展组件{
状态={}；
异步组件didmount（）{
log（“一对if条件和一个ajax请求”）；
}
render（）{
返回主页；
}
}
导出默认连接（）（主页）；

index.test.tsx
：

从“/”导入主页；
从“redux模拟存储”导入configureStore；
从“酶”导入{mount}；
从“React”导入React；
从'react redux'导入{Provider}；
描述（“”，（）=>{
让道具，存储，模拟存储，初始状态；
在每个之前（（）=>{
道具={
getPoints:jest.fn（），
估计点：jest.fn（），
};
初始状态={
homeReducer：{
档案：{}，
},
指针减速器：{
分数：{
要点：{}，
},
},
};
mockStore=configureStore（）；
store=mockStore（initialState）；
});
它（'应该调用componentDidMount生命周期方法'，（）=>{
const spy=jest.spyOn（HomePage.WrappedComponent.prototype，'componentDidMount'）；
常量包装器=装入(
,
);
期望（间谍）。已被调用（）；
wrapper.unmount（）；
});
});

单元测试结果：

通过src/stackoverflow/59759511/index.test.tsx（9.85s）
✓ 应调用componentDidMount生命周期方法（62ms）
console.log src/stackoverflow/59759511/index.tsx:7
几个if条件和一个ajax请求
测试套件：1个通过，共1个
测试：1项通过，共1项
快照：共0个
时间：10.983s

源代码：
太棒了，非常有魅力，谢谢！阅读
wrappedComponent
，更好地理解使用它的原因。你知道为什么
wrappedComponent
可以工作吗？@complexSandwich已经在回答中解释过了。获取未包装的（原始的）基于类的react组件。我希望我能早点发现这一点。谢谢：）太棒了，很有魅力，谢谢！阅读
wrappedComponent
，更好地理解使用它的原因。你知道为什么
wrappedComponent
可以工作吗？@complexSandwich已经在回答中解释过了。获取未包装（原始）基于类的react组件。我希望我