"Jest encountered an unexpected token" when trying to build Angular 10 Component Unit Test with FullCallendarModule

Viewed 354

I am trying to create a unit test for a component that uses FullCalendar for Angular. Any idea how to solve this problem?

Details:
...........\node_modules\@fullcalendar\core\main.js:6
    import './vdom';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 | import {async, ComponentFixture, TestBed} from "@angular/core/testing";
    > 2 | import {FullCalendarModule}               from "@fullcalendar/angular";
        | ^
      3 | import dayGridPlugin                      from "@fullcalendar/daygrid";
      4 | import interactionPlugin                  from "@fullcalendar/interaction";
      5 | import {CalendarComponent}                from "../../calendar/calendar.component";

      at Runtime._execModule (../node_modules/jest-runtime/build/index.js:1179:56)
      at ../node_modules/@fullcalendar/angular/bundles/fullcalendar-angular.umd.js:2:139
      at Object.<anonymous> (../node_modules/@fullcalendar/angular/bundles/fullcalendar-angular.umd.js:5:2)
      at Object.<anonymous> (app/private-pages/booking/booking-page.component.spec.ts:2:1)

Hope this is enough information for those who solved that problem in the past. Please let me know if you need more information (eg. complete codes, etc.)

I found this SO answer which did not help in my case (propably it targets React but not Angular): customize-cra to compile node_modules for JEST

1 Answers

In your testing file you need to mock full Calendar as follows:

jest.mock('@fullcalendar/angular', () => () => <div />);

Related