FullCalendar v6在Jest中失败

xhv8bpkk  于 2022-12-08  发布在  Jest
关注(0)|答案(1)|浏览(221)

我正在将我的项目更新到Angular 14。显然,FullCalendar v6是唯一与Angular 14兼容的。所以,我按照这个steps来更新库。
这很好,一切看起来都在工作。但是,当我用jest library运行测试时,结果如下:

Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    SyntaxError: Unexpected token 'export'

      15 | import { CreateBookingComponent } from '../create-booking/create-booking.component';
      16 | import { CalendarOptions } from '@fullcalendar/core';
    > 17 | import { defineFullCalendarElement, FullCalendarElement } from '@fullcalendar/web-component';
         | ^
      18 |
      19 | // NOTE: These imports are needed for the calendar to work and have to be the last ones
      20 | import dayGridPlugin from '@fullcalendar/daygrid';

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1422:14)
      at Object.<anonymous> (node_modules/@fullcalendar/core/vdom.cjs.js:3:14)
      at Object.<anonymous> (node_modules/@fullcalendar/core/main.cjs.js:10:1)
      at Object.<anonymous> (node_modules/@fullcalendar/web-component/main.cjs.js:10:12)
      at Object.<anonymous> (src/app/my-bookings-calendar/my-bookings-calendar.component.ts:17:1)
      at Object.<anonymous> (src/app/app.module.ts:44:1)
      at Object.<anonymous> (src/app/edit-reservation/edit-reservation.component.spec.ts:9:1)

这是package.json中的jest配置:

"jest": {
    "preset": "jest-preset-angular",
    "setupFilesAfterEnv": [
      "<rootDir>/setup-jest.ts"
    ],
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less|sass|scss)$": "<rootDir>/__mocks__/styleMock.js",
      "^.+\\.module\\.(css|less|sass|scss)$": "identity-obj-proxy",
      "^config$": "<rootDir>/extra-webpack-config.js"
    },
    "moduleDirectories": [
      "node_modules"
    ],
    "modulePaths": [
      "<rootDir>"
    ]
  }

这就是app.module.ts

@NgModule({
    declarations: [
        AppComponent,
        EmptyRouteComponent,
        CreateBookingComponent,
        MyBookingsTableComponent,
        EditReservationComponent,
        MyBookingsCalendarComponent,
        ViewSelectedTabComponent,
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        HttpClientModule,
        CommonModule,
        ThemeModule,
        DropdownModule,
        I18NextModule.forRoot(),
        BrowserAnimationsModule,
        ButtonModule,
        TableModule,
        CalendarModule,
        ConfirmDialogModule,
        FormsModule,
        DynamicDialogModule,
        ReactiveFormsModule,
        CheckboxModule,
        InputTextModule,
        InputNumberModule,
        DialogModule,
        OverlayPanelModule,
        MultiSelectModule
    ],
    providers: [
        I18N_PROVIDERS,
        ConfirmationService,
        DialogService,
        { provide: LOCALE_ID, useValue: 'es' },
        { provide: ErrorHandler, useClass: GlobalErrorHandler },
        { provide: HTTP_INTERCEPTORS, useClass: HttpErrorInterceptor, multi: true },
        { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptorService, multi: true }
    ],
    bootstrap: [AppComponent],
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

我有点迷路了,因为我在互联网上找不到任何东西,而且我从来没有使用过Web组件,直到现在。所以,有人能帮助我解决这个错误吗?
先谢谢你,

  • Angular 版本:14
  • 笑话版本:29.2.1
  • “@完整日历/内核”:“^6.0.0-试用版1”
  • “@完整日历/日网格”:“^6.0.0-试用版1”,
  • “@完整日历/互动”:“6.0.0-β 1”,
  • “@完整日历/时间网格”:“6.0.0-β 1”,
  • “@完整日历/Web组件”:“^6.0.0-试用版1”,
    经验证的解决方案:

方案一:

"transformIgnorePatterns": [
   "/node_modules/(?!@fullcalendar/*).+\\.[t|j]sx?$"
]
ilmyapht

ilmyapht1#

需要添加transformIgnorePatterns。因为完整日历可能包含与transpiler不兼容的js文件

"jest": {
    ...,
    "transformIgnorePatterns": [
      "node_modules/(?!your-module-name)"
    ]
}

相关问题