Angular 18使用ATL测试时，如何提供路由参数作为必填输入信号？

针对你遇到的“Input is required but no value available yet”错误，分两种场景给出解决方案：

场景1：直接为组件传入必填输入值 #

如果测试不需要模拟完整路由流程，可在render函数中通过componentInputs参数直接传递输入值，快速满足必填要求：

import { render } from '@testing-library/angular';
import { YourComponent } from './your.component';

test('组件渲染并使用传入的参数', async () => {
  await render(YourComponent, {
    componentInputs: {
      // 替换为你实际的必填输入信号名称
      targetParam: 'sample-123'
    }
  });

  // 此处添加你的断言逻辑，比如验证参数是否被正确渲染
});

场景2：模拟路由模块让组件从路由获取参数 #

如果组件依赖ActivatedRoute获取路由参数并赋值给输入信号，需在测试中模拟路由环境：

import { render } from '@testing-library/angular';
import { YourComponent } from './your.component';
import { ActivatedRoute } from '@angular/router';
import { of } from 'rxjs';
import { provideRouter } from '@angular/router';

test('组件从路由参数获取值并正常工作', async () => {
  await render(YourComponent, {
    providers: [
      // 模拟ActivatedRoute的paramMap返回目标参数
      {
        provide: ActivatedRoute,
        useValue: {
          paramMap: of({ get: (key: string) => key === 'id' ? 'test-456' : null })
        }
      },
      // 配置测试路由（可选，若组件需匹配路由路径）
      provideRouter([
        { path: 'detail/:id', component: YourComponent }
      ])
    ]
  });

  // 断言组件正确处理了路由参数
});

注意事项 #

• 替换代码中的YourComponent、targetParam、id等为你项目中的实际名称。
• 若组件通过@Input({ required: true }) param = input.required<string>()定义必填输入，场景1的方式最直接高效。
• 若组件内部包含从路由提取参数的逻辑，场景2的模拟方式更贴近真实运行流程，能覆盖完整的参数获取链路。

内容的提问来源于stack exchange，提问作者Eternal Sunshine