已解决 - ActivatedRoute 角度单元测试答案

【问题标题】：Resolved - ActivatedRoute angular unit test已解决 - ActivatedRoute 角度单元测试
【发布时间】：2021-10-19 16:19:27
【问题描述】：

我在测试这段代码时遇到了一个问题：

constructor(
    private valuePairService: ValuePairService,
    private sanitizer: DomSanitizer,
    private service: Service,
    private router: Router,
    private route: ActivatedRoute
  ) {}

ngOnInit(): void {
    this.route.data.subscribe(({ result }) => {
      this.video =
        result.value === undefined
          ? '//player.vimeo.com/video/65498532'
          : result.value;
    });
  }

在我的测试中，我添加了这个提供程序：

beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [RouterTestingModule, HttpClientTestingModule],
      providers: [
        {
          provide: ActivatedRoute,
          useValue: { data: of({ value: 'test'}) }
        },
      ],
    }).compileComponents();
    router = TestBed.inject(Router);
  });

关于如何测试它的任何想法？执行测试时出现此错误：

error properties: Object({ longStack: 'TypeError: Cannot read property 'value' of undefined

更新：

问题是我以错误的方式测试了 observable。我使用的是“价值”而不是“结果”。单元测试中的解决方案如下：

beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [RouterTestingModule, HttpClientTestingModule],
      providers: [
        {
          provide: ActivatedRoute,
          useValue: { data: of({ result: 'test'}) }
        },
      ],
    }).compileComponents();
    router = TestBed.inject(Router);
  });

【问题讨论】：

您的已激活路由的测试替身与它正在替换的东西的结构不同，这使得它没有用处。
想想你正在测试的代码实际上期望在订阅中收到什么。 result 是从哪里来的，为什么应该是具有 value 属性的对象时却未定义？
请注意，这不是帮助台，如果您有截止日期，您需要自己管理：meta.stackoverflow.com/questions/326569/…。
是错字吗？ this.route.data.subscribe(({ result }) 应该是 this.route.data.subscribe(result=>...)
黑魔法对我来说;) ty。不过，为什么不result？

标签： angular unit-testing angular-unit-test

【解决方案1】：

我不明白你为什么要在那里使用 destruct，但它对你不起作用

由于缺少result，甚至编译器都说它无效
它会产生 undefined

https://stackblitz.com/edit/rxjs-alzyr4?file=index.ts

代码

of({ value: 'test'})
  .pipe(map(name => `Hello, ${name}!`))
  .subscribe(v=>console.log("normal lambda",v));

  of({ value: 'test'})
  .pipe(map(name => `Hello, ${name}!`))
  .subscribe(({result})=>console.log("descruct",result));

结果

是的，因为result 是未定义的，所以你不能从中得到.value。

使用this.route.data.subscribe(result => actions) 即可。开启strict模式，这样类型检查就可以防止你以后再犯这样的错误。和noImplicitAny

PS。 subscribe(({value})=> actions) 可以工作。

【讨论】：

感谢您对@Antoniossss 的关注。我找到了解决办法。
我会说我已经向你展示了这个问题，但是没关系。

【解决方案2】：

我找到了解决办法。

问题是我以错误的方式测试了 observable。我使用的是“价值”而不是“结果”。单元测试中的解决方案如下：

beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [RouterTestingModule, HttpClientTestingModule],
      providers: [
        {
          provide: ActivatedRoute,
          useValue: { data: of({ result: 'test'}) }
        },
      ],
    }).compileComponents();
    router = TestBed.inject(Router);
  });

【讨论】：