bug(ButtonToggle, RadioButton, Tabs): v13 Unit tests using Jest are failing - "ReferenceError: Cannot access 'MatButtonToggle' before initialization"

[michaelfaith]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

12.2.13

Description

We're using Jest for unit testing, with the jest-preset-angular configuration/setup. They've recently updated for v13 support. The tests are running fine, except for components that have Material modules imported. We're seeing this for each:

Test suite failed to run

    ReferenceError: Cannot access 'MatButtonToggle' before initialization

       6 |
       7 | import { ComponentFixture, TestBed } from '@angular/core/testing';
    >  8 | import { MatButtonToggleModule } from '@angular/material/button-toggle';
         | ^
       9 | import { MatIconModule } from '@angular/material/icon';
      10 |
      11 | import { ButtonToggleDemoComponent } from './button-toggle-demo.component';

      at Object.<anonymous> (../../node_modules/@angular/node_modules/@angular/material/fesm2015/button-toggle.mjs:254:63)
      at Object.<anonymous> (src/app/component-demos/button-toggle-demo/button-toggle-demo.component.spec.ts:8:1)

Looking at the failures, it doesn't appear to be all components. The only ones that are causing failures for us are:

• MatRadioModule
• MatTabsModule
• MatButtonToggleModule

Though, it is likely failing on the first errors, so there could be more. But many are definitely passing, so it's not all of them. So far it's just these three that consistently fail.

Reproduction

Simply importing the module import { MatButtonToggleModule } from '@angular/material/button-toggle'; in a Jest unit test, is causing the test to fail. It doesn't even run the tests for that spec, when present.

Expected Behavior

Should import modules successfully.

Actual Behavior

Test suite failed to run

    ReferenceError: Cannot access 'MatButtonToggle' before initialization

       6 |
       7 | import { ComponentFixture, TestBed } from '@angular/core/testing';
    >  8 | import { MatButtonToggleModule } from '@angular/material/button-toggle';
         | ^
       9 | import { MatIconModule } from '@angular/material/icon';
      10 |
      11 | import { ButtonToggleDemoComponent } from './button-toggle-demo.component';

      at Object.<anonymous> (../../node_modules/@angular/node_modules/@angular/material/fesm2015/button-toggle.mjs:254:63)
      at Object.<anonymous> (src/app/component-demos/button-toggle-demo/button-toggle-demo.component.spec.ts:8:1)

Environment

• Angular: 13.0.0
• CDK/Material: 13.0.0
• Browser(s): JSDOM
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

[michaelfaith]

According to @JoostK (thymikee/jest-preset-angular#1090 (comment)) this is being worked on by @petebacondarwin

[devversion]

@michaelfaith Yeah, this is related to the Angular partial compilation emit not properly dealing with forwardRef and our APF v13 package output therefore emitting invalid Angular declarations for JIT. Once this is fixed upstream, we'll republish a version, and we'll have better testing for ensuring JIT linker-processing works. See #23882

[michaelfaith]

@devversion Excellent! Thanks for the info. Appreciate the quick response.