Question

我已经阅读了许多有关使用路由器测试模块并试图监视router.navigate方法的文章，但没有一个解决我遇到的问题。大约每进行2次测试，我都会看到错误，这是完整的第一行

Uncaught Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'post/view'

要重申的是，仅在测试时运行我的应用程序时未出现错误

无论组件中有多少测试，它只会出现一次，并且始终是它发生的第一个测试，如果我切换顺序，则是新的第一个测试失败并出现此错误

我的组件如下（为简洁起见，删除了不相关的代码）

export class CreatePostComponent implements OnInit {

  constructor(private postService: PostService,
              private router: Router,
              private location: Location) {
  }

  submitPost() {
    this.validMessage = '';
    if (!this.createPostForm.valid) {
      this.validMessage = 'Please fill out the form before submitting!';
      return;
    }
    const post = this.createPostForm.value as IPost;
    this.postService.createPost(post)
      .pipe(first())
      .subscribe(
        data => {
          this.createPostForm.reset();

          //Here's the call that I believe causes the issues
          this.router.navigate(['post/view']);
        },
        error => {
          return throwError(error);
        }
      );
  }
}

这是规格，再次删除了不相关的测试

describe('CreatePostComponent', () => {
  let component: CreatePostComponent;
  let fixture: ComponentFixture<CreatePostComponent>;
  let http: HttpTestingController;
  let mockPostService;
  let mockLocationService;


  beforeEach(async(() => {
    mockPostService = jasmine.createSpyObj(['createPost']);
    mockLocationService = jasmine.createSpyObj(['back']);
    TestBed.configureTestingModule({
      declarations: [CreatePostComponent],
      imports: [ReactiveFormsModule,
        HttpClientTestingModule,
        RouterTestingModule],
      providers: [
        {provide: PostService, useValue: mockPostService},
        {provide: Location, useValue: mockLocationService}]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    http = TestBed.get(HttpTestingController);
    fixture = TestBed.createComponent(CreatePostComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

我还尝试了如下监视路由器（其余代码不变）

  beforeEach(async(() => {
    mockPostService = jasmine.createSpyObj(['createPost']);
    mockLocationService = jasmine.createSpyObj(['back']);
    TestBed.configureTestingModule({
      declarations: [CreatePostComponent],
      imports: [ReactiveFormsModule,
        HttpClientTestingModule,
        RouterTestingModule],
      providers: [
        {provide: PostService, useValue: mockPostService},
        {provide: Location, useValue: mockLocationService}]
    })
      .compileComponents();

    spyOn<any>(component['router'], 'navigate').and.returnValue(true);
  }));

并且我尝试将自己的模拟程序注入导航，如下所示：

  beforeEach(async(() => {
    mockPostService = jasmine.createSpyObj(['createPost']);
    mockLocationService = jasmine.createSpyObj(['back']);
    TestBed.configureTestingModule({
      declarations: [CreatePostComponent],
      imports: [ReactiveFormsModule,
        HttpClientTestingModule],
      providers: [
        {provide: PostService, useValue: mockPostService},
        {provide: Location, useValue: mockLocationService},
        {provide: Router, useValue: {navigate: () => true}}]
    })
      .compileComponents();
  }));

Answer 1

您没有为RouterTestingModule提供任何有效的路由，因此它告诉您它不知道如何路由到“发布/查看”。将RouterTestingModule的导入更改为如下所示：

/path/to/pip3 install ....
/path/to/python3 <NAME_OF_THE_SCRIPT>

其中BlankComponent是一个空组件，仅用于测试目的。

以下是一个有效的StackBlitz，显示了此解决方案。要重新创建您的错误，只需注释掉我更改过的RouterTestingModule声明，然后取消注释原来的注释，而在Stackblitz中就没有下面的路由。

我同意文档在此方面并不出色-主要测试文档仅声明将来还会有一个文档详细描述RouterTestingModule。请参阅API信息here，它在使用Routes的最后给出了一个示例。

我希望这会有所帮助。：）

间歇性错误无法匹配任何路线单元测试Angular

1 个答案: