javascript - 测试用例失败
问题描述
我正在尝试使用 jest 测试以下功能:
fetchContent() {
fetch(`${this.contentApi}?id=${this.id}`)
.then(data => data.json())
.then(response => {
this.content = response;
console.log('===this.content====', this.content);
console.log('===Response====', response);
console.log('===This====', this);
this.assignContent();
})
.catch(error => {
throw Error(error);
});
}
为了编写这个函数的测试用例,我模拟了window.fetch
函数contentApi
、id
和assignContent
函数。然后,我尝试通过模拟所有必要的函数和变量来在我的测试用例中调用这个函数。
这是测试用例的片段:
it('should fetch and assign content', () => {
obj.assignContent = jest.fn();
obj.contentApi = 'abc.xyz';
obj.id = 'dxp';
window.fetch = jest.fn().mockImplementation(url => {
if(url === 'abc.xyz?id=dxp') {
return Promise.resolve({
json: () => { return 'abc'; }
})
}
else {
return Promise.reject(new Error());
}
});
obj.fetchContent();
console.log('===OBJ====', obj);
// expect(obj.content).toEqual('abc');
// expect(obj.assignContent).toBeCalled();
});
它失败了,既没有将内容设置为'abc'
,也没有在调用assignContent()
。
console.log src\dxp-container.spec.tsx:57
===OBJ==== Container {
initialAssignmentDone: false,
assignContent:
{ [Function: mockConstructor]
_isMockFunction: true,
getMockImplementation: [Function],
mock: [Getter/Setter],
mockClear: [Function],
mockReset: [Function],
mockReturnValueOnce: [Function],
mockReturnValue: [Function],
mockImplementationOnce: [Function],
mockImplementation: [Function],
mockReturnThis: [Function],
mockRestore: [Function] },
contentApi: 'abc.xyz',
id: 'dxp' }
console.log src\dxp-container.tsx:24
===this.content==== abc
console.log src\dxp-container.tsx:25
===Response==== abc
console.log src\dxp-container.tsx:26
===This==== Container {
initialAssignmentDone: false,
assignContent:
{ [Function: mockConstructor]
_isMockFunction: true,
getMockImplementation: [Function],
mock: [Getter/Setter],
mockClear: [Function],
mockReset: [Function],
mockReturnValueOnce: [Function],
mockReturnValue: [Function],
mockImplementationOnce: [Function],
mockImplementation: [Function],
mockReturnThis: [Function],
mockRestore: [Function] },
contentApi: 'abc.xyz',
id: 'dxp',
content: 'abc' }
解决方案
您的 mockendfetch
函数仍然是异步的(它返回一个 Promise),因此您仍然必须“等待”它才能访问“加载”的数据。
fetchContent() {
return fetch(`${this.contentApi}?id=${this.id}`)
...
}
obj.fetchContent().then(() => {
console.log('===OBJ====', obj);
})
当然,您必须告诉 Jest 等待异步代码,所以您也需要return obj.fetchContent()...
.
推荐阅读
- azure - 如何在 Azure 函数中使用 Azure 资源健康 API?
- r - R 使用 twitteR 包
- volttron - VOLTTRON 执行器代理 RPC 恢复不起作用
- powershell - 使用 Powershell 自动删除文件不起作用
- templates - 用于渲染模板的简单 makefile
- sqlalchemy - SQLAlchemy 1.4 异步事件监听器
- mysql - 如何解决错误 1442:无法更新 mysql 中存储的函数/触发器中的表 'tb_name'?
- linear-regression - ValueError:发现样本数量不一致的输入变量:[35040, 8760]
- c++ - 返回方法中对象的名称
- python - CVXR 中 DCP 规则的问题