添加组件B后项目A单元测试出现NGXLogger注入错误

Hey there, let's work through why adding Component B broke your MainNavComponent unit tests! The error you're seeing (NullInjectorError: No provider for LoggerConfig!) means your test module isn't set up to provide the configuration that NGXLogger needs to run properly.

Here are a few straightforward ways to fix this:

1. Explicitly provide LoggerConfig and NGXLogger in test providers #

The simplest fix is to tell Angular's dependency injector exactly where to get these services when testing MainNavComponent. Add them to the providers array in your test setup:

import { NGXLogger, LoggerConfig } from 'ngx-logger';
import { MainNavComponent } from './main-nav.component';

describe('MainNavComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [MainNavComponent],
      providers: [
        NGXLogger,
        // Use a basic config that matches your app's logging needs
        { provide: LoggerConfig, useValue: { level: 3 } } 
      ]
    }).compileComponents();
  });

  // Your test cases go here...
});

2. Import LoggerModule (if your app uses global logger setup) #

If your application uses LoggerModule.forRoot() to configure NGXLogger globally, replicate that in your test module. This keeps your test config aligned with how your app is set up:

import { LoggerModule } from 'ngx-logger';
import { MainNavComponent } from './main-nav.component';

describe('MainNavComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [MainNavComponent],
      imports: [
        // Match the config from your app's root module
        LoggerModule.forRoot({ level: 3 })
      ]
    }).compileComponents();
  });

  // Your test cases go here...
});

3. Mock the logger for cleaner, focused tests (optional) #

If you don't need real logging behavior in your unit tests, mock the NGXLogger and its config. This avoids relying on the actual service and even lets you verify logger method calls if needed:

import { NGXLogger, LoggerConfig } from 'ngx-logger';
import { MainNavComponent } from './main-nav.component';

describe('MainNavComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [MainNavComponent]
    })
    .overrideProvider(LoggerConfig, { useValue: { level: 0 } }) // Disable logging entirely
    .overrideProvider(NGXLogger, { 
      useValue: jasmine.createSpyObj('NGXLogger', ['log', 'error', 'warn']) 
    })
    .compileComponents();
  });

  // Example test to verify logger usage
  it('should log a message when a nav link is clicked', () => {
    const logger = TestBed.inject(NGXLogger);
    // Trigger a click event on a nav link
    // ...
    expect(logger.log).toHaveBeenCalledWith('Nav link clicked');
  });
});

Why this happened #

When you added Component B, it likely introduced a dependency on NGXLogger that MainNavComponent now inherits—maybe they share a common service, or MainNav uses a component/service that relies on the logger. Your original test module didn't account for this new dependency, which is why the injector threw an error.

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