Angular中如何在每个组件测试前执行指定测试用例？

创建基类让测试套件继承是可行的，但并非最优方案——这种方式容易带来测试上下文污染、灵活性不足的问题。更推荐的是将测试逻辑提取为独立的工具函数，或者扩展测试框架的全局能力，下面具体说明：

一、不推荐继承类的原因 #

继承基类的方式需要在每个测试套件中手动传递fixture实例，步骤繁琐，还可能因不同组件的测试生命周期差异导致状态污染。如果后续需要针对特定组件调整Axe测试规则（比如排除某些误报规则），继承结构会让扩展变得非常麻烦。

二、最优方案：提取独立工具函数 #

将可访问性测试逻辑封装成独立的工具函数，直接在各测试套件中调用，既避免重复代码，又保留灵活性。

1. 封装工具函数 #

创建a11y-test-utils.ts文件：

import { ComponentFixture } from '@angular/core/testing';
import { AxeCoreHelper } from './axe-core.helper';

/**
 * 运行Axe可访问性测试，验证组件无违规
 * @param fixture 组件测试夹具
 * @param axeConfig 可选的Axe自定义配置（如排除特定规则）
 */
export async function runAccessibilityTest(
  fixture: ComponentFixture<any>,
  axeConfig: Parameters<typeof AxeCoreHelper.run>[1] = {}
) {
  await fixture.detectChanges();
  const element = fixture.debugElement.nativeElement;
  const axeResults = await AxeCoreHelper.run(element, axeConfig);
  expect(AxeCoreHelper.toHaveLessThanXViolations(axeResults, 1)).toBeTrue();
}

2. 在组件测试中调用 #

在任意component.spec.ts中直接引入并使用：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MyComponent } from './my.component';
import { runAccessibilityTest } from '../utils/a11y-test-utils';

describe('MyComponent', () => {
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [MyComponent]
    }).compileComponents();

    fixture = TestBed.createComponent(MyComponent);
  });

  // 复用可访问性测试
  it('should have no accessibility violations', async () => {
    await runAccessibilityTest(fixture);
  });

  // 针对当前组件自定义Axe规则的示例
  it('should pass accessibility tests with excluded rules', async () => {
    await runAccessibilityTest(fixture, {
      rules: { 'color-contrast': { enabled: false } }
    });
  });
});

三、进阶方案：全局注册测试用例 #

如果项目中所有组件都需要强制执行可访问性测试，可以通过扩展Jasmine/Jest的全局能力，自动为每个测试套件添加该测试用例。以Jasmine为例：

在test.ts中添加全局逻辑：

import { ComponentFixture, Type, TestBed } from '@angular/core/testing';
import { AxeCoreHelper } from './axe-core.helper';

declare global {
  namespace jasmine {
    interface Describe {
      withA11yTest<T>(componentType: Type<T>, configure?: (testBed: TestBed) => void): void;
    }
  }
}

// 封装带可访问性测试的describe
jasmine.getEnv().describe.withA11yTest = function<T>(
  componentType: Type<T>,
  configure?: (testBed: TestBed) => void
) {
  this(`Component: ${componentType.name}`, () => {
    let fixture: ComponentFixture<T>;

    beforeEach(async () => {
      const testBed = TestBed.configureTestingModule({
        declarations: [componentType]
      });
      configure?.(testBed);
      await testBed.compileComponents();
      fixture = testBed.createComponent(componentType);
    });

    it('should have no accessibility violations', async () => {
      await fixture.detectChanges();
      const element = fixture.debugElement.nativeElement;
      const axeResults = await AxeCoreHelper.run(element);
      expect(AxeCoreHelper.toHaveLessThanXViolations(axeResults, 1)).toBeTrue();
    });
  });
};

然后在组件测试中直接使用：

import { MyComponent } from './my.component';

describe.withA11yTest(MyComponent, (testBed) => {
  // 自定义TestBed配置，比如添加依赖
  testBed.configureTestingModule({
    providers: [MyService]
  });
});

这种方式进一步减少重复代码，但仅适合所有组件都需要统一可访问性测试的场景。

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