Jest unit testing in React-in-Angular hybrid app: reading 'ɵcmp'

I am writing an Angular application, and it just happens that one of the third-party components happens to be in React. I wrote a wrapper NG component to render the React one, and it works beautifully giving the desired result. However, this setup messes up all the test cases giving the dreaded error:

Cannot read properties of undefined (reading 'ɵcmp')
​

The test cases are written in jest.

React Component

export const ReactoComponent: FunctionComponent<IProps> = (props: IProps) => {
return (
<div className={`reacto-component`}>
<span>Counter: {props.counter}</span>
</div>
);
};


Angular Wrapper

@Component({
selector: 'wrapper',
standalone: true,
templateUrl: './wrapper.component.html',
})
export class WrapperComponent implements AfterViewInit {
counter = 42;

@ViewChild('myReactContainer', { static: false }) container!: ElementRef;

ngAfterViewInit() {
this.render();
}

render() {
const { counter } = this;
ReactDOM.render(
<div className={'wrapper'}>
<ReactoComponent counter={counter} />
</div>,
this.container.nativeElement
);
}
}


Wrapper Test

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

beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [WrapperComponent],
}).compileComponents();

fixture = TestBed.createComponent(WrapperComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});


Error

Expected value undefined
Received:
undefined

Message:
Cannot read properties of undefined (reading 'ɵcmp')


jest.config

module.exports = {
preset: 'jest-preset-angular',
setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
globalSetup: 'jest-preset-angular/global-setup',
testMatch: ['**/*.test.ts'],
};


How do I fix the unit tests?

I was able to replicate the error using a simple Stackblitz: https://stackblitz.com/edit/stackblitz-starters-se1ssj (run npm run test on the Stackblitz console)

Continue reading...