Description of the bug
When using MockModule in combination with a DevExtreme angular module, the ng-mocks fails to properly create mocked versions of the module components.
Using
ng-mocks: 14.13.2,
angular: 19.1
devextreme: 24.1
MockComponent seems to work though.
An example of the bug
<my-component.component.ts>
Codeimport { Component } from '@angular/core';
@Component({
selector: 'my-selector',
template: '',
standalone: false,
})
export class MyComponent {
}
<my-component.component.spec.ts>
Codeimport { ComponentFixture, TestBed } from '@angular/core/testing';
import { MockComponent, MockDirective, MockModule, MockService } from 'ng-mocks';
import { DxTreeListComponent, DxTreeListModule } from 'devextreme-angular';
import { MyComponent } from './my-component.component';
fdescribe('MyComponent', () => {
let component: MyComponent;
let fixture: ComponentFixture;
TestBed.configureTestingModule({
imports: [
MockModule(DxTreeListModule) // ----> NOTE: MockComponent(DxTreeListComponent) works fine.
],
}).compileComponents();
function initComponent() {
fixture = TestBed.createComponent(MyComponent);
component = fixture.componentInstance;
fixture.detectChanges();
}
it('should create', () => {
initComponent();
expect(component).toBeTruthy();
});
});
Expected vs actual behavior
Expected: The component is created and the test passed.
Actual: Runtime error.
MyComponent › should create
Unexpected "MockOf_DxoColumnChooserComponent" found in the "declarations" array of the "MockOf_DxoColumnChooserModule" NgModule, "MockOf_DxoColumnChooserComponent" is marked as standalone and can't be declared in any NgModule - did you intend to import it instead (by adding it to the "imports" array)?
Hello,
Thank you for the detailed description.
Another user recently reported the same issue. We discussed this case with my team. We wish we could switch to standalone components in the future, but unfortunately, we can't do this right now. So, I added your request to our internal backlog, and we are going to research this matter. If we have news, we will definitely update this ticket.
I am sorry for not being of more help with this.
I'm not sure on the internal implementation of the components in devextreme, but for the moment it would be probably be sufficient to just add the "standalone": false flag to components, pipes and directives. This would be low effort, low risk since it would keep the existing behavior but enable better compatibility with other libraries.
Thank you for sharing your thoughts. I'll forward them to my team.
However, we still need to research what might be affected by this change. As I mentioned above, we will inform you as soon as we make progress on this task. Thank you for your patience.