Bug(scope): Unit tests failing with standalone components

[skatterwe]

trafficstars

Is there an existing issue for this?

• [X] I have searched the existing issues

Which Transloco package(s) are the source of the bug?

Transloco

Is this a regression?

Yes

Current behavior

A simple component like this, fails the unit tests when trying to access the content of the template with V6. It works fine with 5.0.7

Template:

<ng-container *transloco="let t; read: 'scopeName'">
<button (click)=onClick()>Test</button>
</ng-container>

Component:

@Component({
  standalone: true,
  selector: 'app-transloco',
  templateUrl: './transloco.component.html',
  imports: [CommonModule, TranslocoModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TranslocoComponent {
  onClick() {
    console.log('Hello World')
  }
}

Test:

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [TranslocoComponent, getTranslocoModule()],
    })
      .overrideComponent(TranslocoComponent, {
        set: {
          imports: [CommonModule, TranslocoModule],
          schemas: [CUSTOM_ELEMENTS_SCHEMA],
        },
      })
      .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(FeedbackErrorComponent);
    component = fixture.componentInstance;
  });

  it('should click button', () => {
    const emitStub = jest.spyOn(console, 'log');
    fixture.detectChanges();

    const button = fixture.debugElement.query(By.css("button"));
    button.triggerEventHandler('click', null);

    expect(emitStub).toHaveBeenCalled();
  });
 
});

The test fails with cannot read property 'triggerEventhandler' of undefined, checking the content of the whole debug element it is apparent that the structural directive of is not resolved and the template blank.

With 5.0.7 this works as expected

Expected behavior

Component unit tests should be working with standalone components like it was in 5.0.7

Please provide a link to a minimal reproduction of the bug, if you won't provide a link the issue won't be handled.

Coudn't find a working example that executes test pls tryout code provided above

Transloco Config

No response

Please provide the environment you discovered this bug in

Transloco: 6.0.4
Angular: 17.1.1
Node: 20.11.0
Package Manager: NPM
OS: Mac

Browser

No response

Additional context

Interestingly this error occurs only when using the transloco structural directive. When using normal directive everything runs fine.

I would like to make a pull request for this bug

No

[JonasDev17]

I have a similar issue where my structural directive is not being resolved. I tried reproducing the issue using a stackblitz but this time the structural directive was resolved however the text wasn't translated:

https://stackblitz.com/edit/stackblitz-starters-c9bsvj?file=README.md

[skatterwe]

I've figured out a bit more information, and added it into the discussion I found that was created from a previous issue that looks like the same one:

https://github.com/jsverse/transloco/discussions/735#discussioncomment-10187588

[skatterwe]

What fixed it for us was the following change:

1. remove moduleNameMapper
2. change transforming pattern from transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'] to transformIgnorePatterns: ['node_modules/?!(.\\*.mjs$|@jsverse)']

  transform: {
    '^.+.(ts|mjs|js|html)$': [
      'jest-preset-angular',
      {
        tsconfig: '<rootDir>/tsconfig.spec.json',
        stringifyContentPathRegex: '\\.(html|svg)$',
      },
    ],
  },
  transformIgnorePatterns: ['node_modules/?!(.\\*.mjs$|@jsverse)'],