FullCalendar v6在Jest中失败

Question

我正在将我的项目更新为Angular 14。显然，FullCalendar v6是唯一兼容Angular 14的版本。因此，我按照以下步骤更新了库。

这很好，一切看起来都很好。然而，当我使用jest库运行测试时，结果如下：

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": {
"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],
})

我有点迷路了，因为我在互联网上找不到任何东西，而且我从来没有使用过网络组件，直到现在。那么，有人能帮我解决这个错误吗？

提前谢谢你，

• 角度版本：14
• Jest版本：29.2.1
• "fullcalendar/core"："6.0.0β1">
• "fullcalendar/daygrid"："6.0.0β1">
• "完整日历/交互"："6.0.0β1">
• "全日历/时间网格"："6.0.0β1">
• "fullcalendar/web组件"："6.0.0β1">

证明的解决方案：

解决方案1:

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

Answer 1

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

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

Answer 2

我找到了这个解决方法：

只需将其添加到jest.config.js

testEnvironmentOptions: {
customExportConditions: [] // don't load "browser" field
}