模拟 Axios 拒绝休息电话

Question

我有一个实用程序类：

工具.ts

import axios, { AxiosResponse } from 'axios';
import { throwError } from 'rxjs';

axios.defaults.withCredentials = true;
axios.defaults.responseType = 'json';

export class UserUtils {

    public updateUserData(data) {
        return axios.post('http://mock.rest.server.com:1234/rest/update/user/', data, 
            {
                withCredentials: true,
                responseType: 'json' as 'json
            })
            .then(resp => {
                return resp;
            })
            .catch(error => {
                return throwError('error updating user data');
            });
    }

}

我的组件类按照以下方式调用上面的内容：

用户组件.ts

export class UserComponent {
    import { UserUtils } from './utils';
    

    public userUtils: UserUtils = new UserUtils();


    // Btn click method
    public update(content) {
        this.userUtils.updateUserData(content) // <-- call made here
           .then((data) => {

               this.showSuccessModal(); // <- trying to test this

           }, (err) => {

               this.showErrorModal(error); // <- trying to test this

           });
    }

}

我正在尝试在 userComponent.ts 上测试正面 (showSuccessModal) / 负面 (showErrorModal) 场景

用户组件.spec.ts

import { UserComponent } from '../../../user/userComponent';
import { UserUtils } from '../../../user/utils';


 describe('User Comp test', () => {

     beforeAll(done => (async () => {

         Testbed.configureTestingModule({
             declarations: [
                 UserComponent
             ]
         });
         await TestBed.compileComponents();
     })().then(done).catch(done.fail);

     describe('User Comp (with beforeEach)', () => {
         let component: UserComponent;
         let fixture: ComponentFixture<UserComponent>;

         beforeEach(() => {                 
             fixture = await TestBed.createComponent(UserComponent);
             component = fixture.componentInstance;
         });

         it('should show error modal', () => {
             let errorModal = spyOn(component, 'showErrorModal');
             spyOn(component.userUtils, 'updateUserData').and.returnValue(Promise.reject('error updating'));

             component.update({test: 'test');
             expect(errorModal).toHaveBeenCalled();
         });
     });
 }

但是在运行测试时，我看到：

Error: Expected spy showErrorModal to have been called
    at <Jasmine>

看起来在测试中，它总是调用“成功”路线。

Answer 1

我认为

.catch(error => {
    return throwError('error updating user data');
});

resolve 是 Observable，你试试：

.catch(error => {
    throw 'error updating user data';
});