title: Angular 5 : How to import jQuery in Jest test?
body: <p>I have an angular component that use a CalendarService.
  When the component is init, I call a "calendarService.init()" method.</p>
  
  <p>This CalendarService set the configuration of a semantic-ui-calendar (base on jQuery), with a code like "$(myElement).calendar(settings);".</p>
  
  <p>When I test my component with Jest, the initialization of the component has an error : "ReferenceError: $ is not defined".</p>
  
  <p>How can i fix it ?</p>
  
  <p>search.component.spec.ts :</p>
  
  <pre><code>describe('SearchComponent', () =&gt; {
  
    let fixture: ComponentFixture&lt;SearchComponent&gt;;
    let component: SearchComponent;
    let element: DebugElement;
  
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        imports: [
          AppModule
        ],
        providers: [
          { provide: APP_BASE_HREF, useValue : '/search' },
          CalendarService
        ]
      });
  
      fixture = TestBed.createComponent(SearchComponent);
  
      let calendarService = TestBed.get(CalendarService);
  
      component = fixture.componentInstance;
      element = fixture.debugElement;
  
      fixture.detectChanges();
    }));
  });
  </code></pre>
  
  <p>search.component.ts :</p>
  
  <pre><code>@Component({
    selector: 'afo-search',
    templateUrl: './search.component.html',
    styleUrls: ['./search.component.less']
  })
  export class SearchComponent implements OnInit, AfterViewInit {
  
    constructor(private calendarService: CalendarService) { }
  
    ngOnInit() {
    }
  
    ngAfterViewInit() {
      this.calendarService.init();
    }
  
  }
  </code></pre>
  
  <p>calendar.service.ts :</p>
  
  <pre><code>@Injectable()
  export class CalendarService {
  
    constructor() {
    }
  
    init() {
      $('.ui.calendar.field').calendar();
    }
  }
  </code></pre>