NodeJS 使用MSW测试Angular 服务导致超时

yh2wf1be  于 2023-02-08  发布在  Node.js
关注(0)|答案(1)|浏览(225)
    • EDIT**:我应该提一下,我只是在测试中遇到了问题。当我运行ng serve并使用msw来提供数据时,一切都正常工作。

我最近偶然发现了mswjs,我想使用模拟服务工作者来测试我的前端服务,而不必等待后端团队,并避免必须编写模拟服务类。我根据文档中提供的示例设置了所有内容。最初我收到了声明spec 'UserService should get list of users' has no expectations的消息。
我对此进行了研究,并在订阅回调的末尾添加了一个done()函数调用,之后,我得到了以下错误:
Error: Timeout - Async function did not complete within 3000ms (set by jasmine.DEFAULT_TIMEOUT_INTERVAL) in node_modules/jasmine-core/lib/jasmine-core/jasmine.js (line 7609)
我已经尝试过在Karma中增加default_timout,但即使将其设置为30.000也没有改变结果。
我也尝试过使用waitForAsync,但没有成功,这样我就没有错误,测试也成功了,只是因为它仍然没有发现规范中的期望值。
我在网上找到的大多数例子都不处理模拟服务工作者,而是求助于使用模拟服务和fakeasync,这对我的情况没有帮助。
下面是我的代码:
我的Angular 服务:

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private url = 'http://localhost:3000/api/users';
  constructor(private http: HttpClient) { }

  getUser(id: string): Observable<User> {
    return this.http.get<User>(`${this.url}/${id}`);
  }

  listUsers(): Observable<User[]> {
    return this.http.get<User[]>(this.url);
  }
}

我的测试代码:

describe('UserService', () => {
  let service: UserService;
  beforeAll(() => {
    worker.start();
  });
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientModule],
    });
    service = TestBed.inject(UserService);
  });

  afterAll(() => {
    worker.stop();
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });

  it('should get list of users', (done) => {
    service.listUsers().subscribe((data) => {
      expect(data.length).toBe(5);
      done();
    });
  })
});

工人设置:

const handlers = [
    rest.get('http://localhost:3000/api/users', (req, res, ctx) => {
        return res(
            ctx.status(200),
            ctx.json(users))
    })
]
export const worker = setupWorker(...handlers)
stszievb

stszievb1#

我设法通过使用firstValueFrom和waitForAsync解决了我自己的问题。我将测试中的代码更改为以下代码:

it('should get list of users', waitForAsync(async () => {
   const source$ = service.listUsers();
   const result = await firstValueFrom(source$);
   expect(result.length).toEqual(5);
}));

相关问题