I wanted to adapt the Shallow Render Specs to standalone, but I keep getting the error Failed: NG0304: 'svg-edit' is not a known element (used in the 'ProxyShallowContainerComponent' component template).
The specs look like this:
describe('IconButtonComponent', () => {
let shallow: Shallow<IconButtonComponent>;
beforeEach(() => {
shallow = new Shallow(IconButtonComponent);
});
it('should show the icon', async () => {
// given
const icon = 'svg-edit';
// when
const { find } = await shallow.render(`
<app-icon-button>
<${icon}></${icon}>
</app-icon-button>
`);
// then
expect(find(icon)).toBeTruthy();
});
What I've tried
adding SvgModule to @Component({ imports: [] }) of IconButtonComponent
adding .import(SvgModule) to new Shallow(IconButtonComponent)
adding .dontMock(EditSvg) to new Shallow(IconButtonComponent)
Precondition
We implement our Icons in a SVG module. One of the components is
EditSvg
(selectorsvg-edit
).We are currently making components in our
SharedModule
standalone.IconButtonComponent
is one of them:This component is used in our code like this:
Error
I wanted to adapt the Shallow Render Specs to standalone, but I keep getting the error
Failed: NG0304: 'svg-edit' is not a known element (used in the 'ProxyShallowContainerComponent' component template)
.The specs look like this:
What I've tried
SvgModule
to@Component({ imports: [] })
ofIconButtonComponent
.import(SvgModule)
tonew Shallow(IconButtonComponent)
.dontMock(EditSvg)
tonew Shallow(IconButtonComponent)
How can I make EditSvg accessible in my tests?