How to mock HightlightJS directive in Standalone components?

[holomekc]

We used the migration tool of angular to convert our components to standalone versions: https://angular.dev/reference/migrations/standalone

This works fine for our application and it seems that everything works as expected. We face some issues in our tests though.
`Error: Uncaught (in promise): Highlight.js library was not imported!``

We have our custom Directive mock, which allowed us to test the content without the hljs magic:

@Directive({
  selector: "[highlight]",
})
export class MockHighlightDirective implements OnInit {
  @Input()
  highlight = "";

  private elementRef: ElementRef;

  constructor(elementRef: ElementRef) {
    this.elementRef = elementRef;
  }

  ngOnInit(): void {
    this.elementRef.nativeElement.innerHTML = this.highlight;
  }
}

This worked fine before, but not anymore :(

I also tried to use ng-mocks instead of our custom solution:

TestBed.configureTestingModule({
      declarations: [MockDirective(Highlight)],
      imports: [ ...

But this then fails with:
Can't bind to 'highlight' since it isn't a known property of 'code'

I could not find an example how this could look like.

What worked for me was not to mock highlight js but instead using it, but I was forced to do it like this:

TestBed.configureTestingModule({
...
providers: [
{
    provide: HighlightLoader,
    useValue: {
      ready: new Promise<any>(resolve => {
        resolve({
          highlight: () => {},
        });
      }),
    },
  },
  provideHighlightOptions({
    coreLibraryLoader: () => import("highlight.js/lib/core"),
    languages: {
      json: () => import("highlight.js/lib/languages/json"),
    },
  }),
...
]

it("should do something", fakeAsync(() => {
  // so something
  const importantElem = fixture.debugElement.query(By.cass("#someId"));
  expect(JSON.parse(importantElem.injector.get(Highlight).code()).toEqual({...});
}));

I was wondering if there is an easier way to achieve that.