我正在尝试测试连接的组件,但似乎没有在componentDidMount函数中进行api调用。我需要它来进行api调用,因此我可以根据api调用返回的值来测试该组件如何渲染。 api调用是由axios使用redux动作进行的。一切都存储在redux中。
这是我的考试
it('should dispatch an action on mount', () => {
const component = shallow(
<ProcessingStatus store={store}/>
);
const didMount = jest.spyOn(component, 'componentDidMount');
expect(didMount).toHaveBeenCalledTimes(1);
//console.log(component.html())
expect(store.dispatch).toHaveBeenCalledTimes(3);
});
这是我组件中的componentDidMount
componentDidMount() {
const {
matches: { params: { id } },
processingStatus,
securityStatus,
routingStatus,
soxStatus,
remedyStatus,
user: {
priv: {
my_sox_requests,
view_remedy
}
}
} = this.props;
let params = 'id=' + id;
if(processingStatus !== undefined){
processingStatus(params)
.catch(thrown => {
console.log(thrown);
});
}
if(securityStatus !== undefined){
securityStatus(params)
.catch(thrown => {
console.log(thrown);
});
}
if(routingStatus !== undefined){
routingStatus(params)
.catch(thrown => {
console.log(thrown);
});
}
if(my_sox_requests && my_sox_requests === 'on' && soxStatus !== undefined){
soxStatus(params)
.catch(thrown => {
console.log(thrown);
});
}
if(view_remedy && view_remedy === 'on' && remedyStatus !== undefined){
remedyStatus(params)
.catch(thrown => {
console.log(thrown);
});
}
}
我得到的错误是
FAIL tests/jest/components/common/ProcessingStatus/index.test.js
<ProcessingStatus />
✓ should render with given state from Redux store (90ms)
✕ should dispatch an action on mount (7ms)
● <ProcessingStatus /> › should dispatch an action on mount
Cannot spy the componentDidMount property because it is not a function; undefined given instead
85 | <ProcessingStatus store={store}/>
86 | );
> 87 | const didMount = jest.spyOn(component, 'componentDidMount');
| ^
88 | expect(didMount).toHaveBeenCalledTimes(1);
89 |
90 | //console.log(component.html())
at ModuleMockerClass.spyOn (node_modules/jest-mock/build/index.js:841:15)
at Object.<anonymous> (tests/jest/components/common/ProcessingStatus/index.test.js:87:31)
我尝试过const didMount = jest.spyOn(ProcessingStatus.prototype, 'componentDidMount');
,但遇到的错误是
● <ProcessingStatus /> › should dispatch an action on mount
expect(jest.fn()).toHaveBeenCalledTimes(expected)
Expected number of calls: 1
Received number of calls: 0
85 | );
86 | const didMount = jest.spyOn(ProcessingStatus.prototype, 'componentDidMount');
> 87 | expect(didMount).toHaveBeenCalledTimes(1);
| ^
88 |
89 | //console.log(component.html())
90 | expect(store.dispatch).toHaveBeenCalledTimes(3);
我设法测试了didmount被调用,但是不确定如何检查是否已进行api调用。
it('should run componentDidMount', () => {
spy = jest.spyOn(ProcessingStatus.prototype, 'componentDidMount');
component = mount(
<ProcessingStatus store={store}/>
);
expect(spy).toHaveBeenCalledTimes(1);
});
答案 0 :(得分:0)
我在这里搜索了一个类似的问题,发现您有一些订单错误:
jest.spyOn(Component.prototype, 'componentDidMount')
shallow(<Component/>)
expect(Component.prototype.componentDidMount).toHaveBeenCalled();
如果组件希望接收将在 componentDidMount 内部调用的 props 函数,则应该在浅层组件时添加它们
const mockExpectedFunction= jest.fn()
shallow(<Component expectedFunction={mockExpectedFunction} />