Tippy with Component as content & Jest Tests

[gebs]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[x] Support request
[ ] Other... Please describe:

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

• Create a new angular application
• Replace jasmin with jest
• Create a new Component
• Add Tippy to the project
• Add tippy somewhere in the app.component with reference to the newly created component
• Run the tests with jest

What is the motivation / use case for changing the behavior?

Environment

Angular version: 15.1.0 (Also with 14.2.12)
Jest version: 28.1.3
helipopper version: 6.5.0

 
For Tooling issues:
- Node version: V16.19.0
- Platform:  Linux

Others:

[shaharkazaz]

@gebs Can you please share a link to a minimal reproduction repo?

[gebs]

Of course, here you go:
https://github.com/gebs/tippy-jest

The tippy directive sits on the "Welcome"

Let me know if you need something else.

[Malaclypse23]

I've got the same problem as original post, Angular 15 / Jest 28

[localpcguy]

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] } });

[localpcguy]

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: [],
  });
  // ...
});

[ringtail003]

I am not very good at English, so I apologize in advance.

I faced same problem on Angular 17 / jest 29.

• @angular/cli": "^17.3.2"
• @testing-library/angular": "^15.2.0"
• jest": "^29.7.0"
• @ngneat/helipopper": "^5.1.4"
• ng-mocks": "^14.12.1"

My workaround is below.

Case1. Components that directly use tippy directives

import { 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.
I'll be happy if the test passes without mocks.
Thank you.