Replies: 6 comments
-
@gebs Can you please share a link to a minimal reproduction repo? |
Beta Was this translation helpful? Give feedback.
-
Of course, here you go: The tippy directive sits on the "Welcome" Let me know if you need something else. |
Beta Was this translation helpful? Give feedback.
-
I've got the same problem as original post, Angular 15 / Jest 28 |
Beta Was this translation helpful? Give feedback.
-
Was there ever a resolution found for this? Still seeing it Angular 16 / Jest 29.6.1. As a workaround, since I was only using the TippyDirective, I made a mock instance of that and overrode the TippyModule in my test. We're also using Spectator, so my test looks something like this. // ...
import { TippyModule } from '@ngneat/helipopper';
import { Spectator, createComponentFactory } from '@ngneat/spectator/jest';
// ...
@Directive({
// eslint-disable-next-line @angular-eslint/directive-selector
selector: '[tippy]',
})
class TippyDirective {
@Input('tippy') content: any;
}
describe('MyComponent', () => {
let spectator: Spectator<MyComponent>;
const createComponent = createComponentFactory({
component: MyComponent,
imports: [],
providers: [],
// TODO: May be able to remove module override if the following issue is fixed
// "TypeError: (0 , import_tippy.default) is not a function"
// see: https://github.com/ngneat/helipopper/issues/126
overrideModules: [[TippyModule, { set: { declarations: [TippyDirective], exports: [TippyDirective] } }]],
});
// ...
}); Pretty sure without Spectator it'd just be something like, but didn't test this. TestBed.configureTestingModule({
declarations: [],
imports: [TippyModule],
// ...
}).overrideModule(TippyModule, { set: { declarations: [TippyDirective], exports: [TippyDirective] } }); |
Beta Was this translation helpful? Give feedback.
-
Followup with another workaround that can be used if your test doesn't need to import a Module that imports TippyModule or exports the Tippy Directive already - just override/mock the Tippy directive and use that in the declarations. Might seem obvious to others, but wanted to share for anyone who might stumble across this looking for alternatives. // ...
@Directive({
// eslint-disable-next-line @angular-eslint/directive-selector
selector: '[tippy]',
})
class TippyDirective {
@Input('tippy') content: any;
}
describe('MyComponent', () => {
let spectator: Spectator<MyComponent>;
const createComponent = createComponentFactory({
component: MyComponent,
declarations: [TippyDirective],
imports: [],
providers: [],
});
// ...
}); |
Beta Was this translation helpful? Give feedback.
-
I am not very good at English, so I apologize in advance. I faced same problem on Angular 17 / jest 29.
My workaround is below. Case1. Components that directly use tippy directivesimport { TippyModule } from "@ngneat/helipopper";
@Component({
standalone: true,
template: `
<some-component />
<p some-directive></p>
<button tippy="Hello"></button>
`,
imports: [
SomeComponent,
SomeDirective,
TippyModule,
]
})
export class TestComponent {} import { TippyModule } from "@ngneat/helipopper";
import { MockModule } from "ng-mocks";
import { render, screen } from "@testing-library/angular";
test("Should be rendered", async () => {
await render(TestComponent, {
// All dependencies need to be listed, But tippy does not send an error.
componentImports: [
SomeComponent,
SomeDirective,
MockModule(TippyModule),
],
});
screen.getByRole("...");
}); Case2. Components that indirectly use tippy directives@Component({
selector: "using-tippy-component",
standalone: true,
template: `
<button tippy="Hello"></button>
`,
})
export class UsingTippyComponent {} @Component({
standalone: true,
template: `
<using-tippy-component />
<some-component />
`,
})
export class TestComponent {} import { TippyModule } from "@ngneat/helipopper";
import { MockComponent } from "ng-mocks";
import { render, screen } from "@testing-library/angular";
test("Should be rendered", async () => {
await render(TestComponent, {
// All dependencies need to be listed, Combined tests for UsingTippyComponent are not available.
componentImports: [
MockComponent(UsingTippyComponent),
SomeComponent,
],
});
screen.getByRole("...");
}); I always like and use helipopper. |
Beta Was this translation helpful? Give feedback.
-
I'm submitting a...
Current behavior
When I try to test a component with jest, that has a tippy with a component as content I get the following error:
TypeError: (0 , import_tippy.default) is not a function
I'm not sure if I'm doing something wrong, if it's just not supported or if it's a bug. Any help/workaround would be appreciated.
Thanks a lot
Expected behavior
The test should pass
Minimal reproduction of the problem with instructions
What is the motivation / use case for changing the behavior?
Environment
Beta Was this translation helpful? Give feedback.
All reactions