FullCalendar v6 在 Jest 中失败

Question

我正在将我的项目更新到 Angular 14。显然，FullCalendar v6 是与 Angular 14 唯一兼容的。所以，我按照这个 steps 来更新库。

这很好，一切看起来都正常。然而，当我使用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],
})

我有点迷失，因为我在互联网上找不到任何东西，而且到目前为止我从未使用过 Web 组件。那么，有人可以帮我解决这个错误吗？

提前谢谢您，

• 角度版本：14
• 笑话版本：29.2.1
• “@fullcalendar/core”：“^6.0.0-beta.1”
• “@fullcalendar/daygrid”：“^6.0.0-beta.1”，
• “@fullcalendar/interaction”：“6.0.0-beta.1”，
• “@fullcalendar/timegrid”：“6.0.0-beta.1”，
• “@fullcalendar/web-component”：“^6.0.0-beta.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
  }

Answer 3

我在角度单元测试中遇到了同样的错误，并在被困一周并几乎放弃后，通过遵循https://topappdevelopers.net/blog/angular-fullcalendar-jest解决了它。

我发现的所有 Github 和 Stackoverflow 回复都正确地提到了添加 TransformIgnorePatterns，但这些都对我不起作用，尽管提供的解决方案对其他人也有效。不知道为什么，但 (.*.mjs$|@fullcalendar|preact) 有效。您需要考虑 mjs 和 preact，而不仅仅是 @fullcalendar。

import type { Config } from 'jest'

const config: Config = {
    preset: 'jest-preset-angular',
    setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
    transformIgnorePatterns: ['node_modules/(?!(.*.mjs$|@fullcalendar|preact))']
}

export default config