Reactjs 生命周期方法中的Jest/Ezyme-mock异步函数

我试着用笑话对我的React组件进行单元测试。我的测试正在通过，但由于try/catch中的console.error（），我得到了TypeError。我认为我的模拟设置不正确，但我尝试了与我们的任何结果异步进行。谢谢你给我小费

console.error components/App.js:91 TypeError:无法读取未定义的属性“fetchPoints” 在App.fetchPoints（D:\\components\App.js:87:48） 在tryCatch（D:\\node\u modules\registrator runtime\runtime.js:62:40） 在Generator.invoke[as _invoke]（D:\\node\u modules\registrator runtime\runtime.js:296:22） 在Generator.prototype.（匿名函数）[作为下一步]（D:\\node\u modules\registrator runtime\runtime.js:114:21） 步骤（D:\\components\App.js:38:191） 在D:\\components\App.js:38:437 在新的承诺（） 在应用程序。（D:\\components\App.js:38:99） 在App.componentDidMount（D:\\components\App.js:155:30） 位于D:\\node\u modules\react test renderer\lib\ReactCompositeComponent.js:262:25 在measureLifeCyclePerf（D:\\node\u modules\react test renderer\lib\ReactCompositeComponent.js:73:12） 位于D:\\node\u modules\react test renderer\lib\ReactCompositeComponent.js:261:11 在CallbackQueue.notifyAll（D:\\node\u modules\react test renderer\lib\CallbackQueue.js:74:22） 在ReactTestReconficateTransaction.close（D:\\node\u modules\react test renderer\lib\ReactTestReconficateTransaction.js:34:26） 在ReactTestReconcietTransaction.closeAll（D:\\node\u modules\react test renderer\lib\Transaction.js:207:25） 在ReactTestReconcietTransaction.perform（D:\\node\u modules\react test renderer\lib\Transaction.js:154:16） 在BatchedMountComponentNode（D:\\node\u modules\react test renderer\lib\ReactTestMount.js:67:27） 在ReactDefaultBatchingStrategyTransaction.perform（D:\\node\u modules\react test renderer\lib\Transaction.js:141:20） 在Object.batchedUpdate（D:\\node\u modules\react test renderer\lib\ReactDefaultBatchingStrategy.js:60:26） 在Object.batchedUpdate（D:\\node\u modules\react test renderer\lib\ReactUpdates.js:95:27） 在Object.render（D:\\node\u modules\react test renderer\lib\ReactTestMount.js:126:18） 在Object.create（D:\\components\uuuuu tests\uuuuu\App.test.js:26:31） 在Object.asyncJestTest（D:\\node\u modules\jest-jasmine2\build\jasmine\u async.js:108:37） 解析时（D:\\node\u modules\jest-jasmine2\build\queue\u runner.js:56:12） 在新的承诺（） 在映射器上（D:\\node\u modules\jest-jasmine2\build\queue\u runner.js:43:19） 在promise.then（D:\\node\u modules\jest-jasmine2\build\queue\u runner.js:87:41） 在 在进程中。_tick回调（内部/process/next_tick.js:188:7）

App.test.js

我尝试使用mount（）和fetchPoints返回Promise.resolve（）

从“React”导入React；
从“反应测试渲染器”导入渲染器；
从“酶”导入{shall，configure，mount}；
从'enzyme-Adapter-react-15'导入适配器；
从“../App”导入{App}；
配置（{adapter:newadapter（）}）；
描述（'App'，（）=>{
让包装纸；
常量apimock动作={
fetchPoints:jest.fn（）
};
在每个之前（（）=>{
包装器=浅（）；
});
它（'应该调用#componentDidMount'中的fetchPoints'，（）=>{
返回wrapper.instance（）.componentDidMount（）。然后（（）=>{
expect（apiMockActions.fetchPoints）.toHaveBeenCalled（）；
});
});
});应为每个测试创建间谍和存根：

let apiMockActions;

beforeEach(() => {
  apiMockActions = {
    fetchPoints : jest.fn()
  };
});

默认情况下，在Ezyme 3及更高版本中启用生命周期，因此手动调用
componentDidMount
会导致调用它两次。他们为了从
组件didmount
链接承诺：

beforeEach(() => {
    wrapper = shallow(<App actions={apiMockActions} />, { disableLifecycleMethods: true });
});

看起来您正在使用较旧版本的
react
，您是否可以共享您的
包.json
？仍然可以收到此控制台消息。所有测试都通过了。console.log components/App.js:38无法读取未定义的属性“fetchPoints”更新了答案。但是，如果在建议的每个

之前包含

，我不确定如何定义
操作
。我建议调试您的代码，并确保
apiMockActions
是
中的对象（
。这一切都很好。
console.log（typeof instance.props.actions）输出：object
fetchPoints函数也在实例中定义。当我删除console.error（e）时try/catch中的语句没有输出“undefined”。我不清楚为什么会调用catch块，因为我定义了解析值。当我定义mockRejectedValue（“403”）时，它会像我预期的那样在控制台中输出“403”。fetchPoints undefined没有出现。但是我仍然不知道为什么fetchPoints（）当我没有定义mockRejectedValue时，函数在catch块中被调用。我认为它应该输出“error”未定义。我将在Jest文档中进行一些研究。感谢帮助！它输出未定义，因为
this.props.actions
未定义并导致错误。我认为这与mockRejectedValue无关，mock是在OP中设置不正确，但不会导致此错误。您提供的代码无法解释此错误。因为
操作
明确提供为
浅（，…）
，这可能意味着
App
是在其他地方实例化的。还要仔细检查
apiMockActions
是否是您调用
shall
的对象。
it('should call fetchPoints in #componentDidMount', async () => {
    const points = [...];
    const instance = wrapper.instance();
    apiMockActions.fetchPoints.mockResolvedValue(points);
    await instance.componentDidMount();
    expect(apiMockActions.fetchPoints).toHaveBeenCalled();
    expect(instance.state.data).toEqual({ data: points });
});