SyntaxError: Unexpected token 'export' when running jest tests

[pimmee]

Reduced Test Case

https://stackblitz.com/edit/github-sgjd3r?file=src/demo.test.jsx&view=editor

Do you understand that if a reduced test case is not provided, we will intentionally delay triaging of your ticket?

• I understand

Which connector are you using (React/Angular/etc)?

React

Bug Description

Since upgrading to FullCalendar v6, all my react test in jest are failing with the following error:

SyntaxError: Unexpected token 'export'

Here's the error when I run 'npm run test' in StackBlitz

Edit:
Here's a StackBlitz with v5.11.3 where the test is working. The following release (v6.0.0-beta.2) is not working.

[acerix]

Thanks, confirmed. I get the same error when running yarn test on the example project.

https://github.com/fullcalendar/fullcalendar-examples/tree/main/jest-react

[adampana]

I am facing the same issue when I moved to 6.0.2 from 5.11.3

[arshaw]

queued for release 8b0eb87

[arshaw]

released in v6.0.3

[pimmee]

released in v6.0.3

@arshaw I'm still experiencing the issue in 6.0.3, please reopen the issue. See repro with 6.0.3 dependencies

[arshaw]

I was using jest 27, which works fine now. I see the problem in jest 28 and above.

The problem is happening because jest now looks at the "browser" field in package.json for jsdom. Internally, preact provides a "browser" field, but the file is ESM, which jest does not natively support without a babel transform.

I'll look into this more. But a workaround would be ensuring an ESM babel transform is applied to node_modules packages (specifically preact).

[arshaw]

here's a nicer workaround. in your jest.config.js:

module.exports = {
  testEnvironment: 'jsdom',
  testEnvironmentOptions: {
    customExportConditions: [] // don't load "browser" field
  }
};

[pimmee]

That workaround works, thanks!

[arshaw]

I've updated the repro with the latest version (v6.1.1) and added the above-mentioned fix. It works:

https://stackblitz.com/edit/github-sgjd3r-mmezji?file=package.json&view=editor

I've mentioned this workaround at the bottom of the fullcalendar-react docs and the example project.

[rjdestigter]

I had to modify transformIgnorePatterns to not match node_modules/preact so that it would be included in the transformation: node_modules\/(?!preact). Additionally I had to provide a custom transformation option as my setup (preset ts-jest) was only targeting TypeScript files:

transform: {
  "node_modules/preact": "babel-jest",
},

[robbyjobber]

Setting this in your jest config also fixes this issue.

moduleNameMapper: {
    "^preact(/(.*)|$)": "preact$1",

[edukisto]

tsconfig.json:

{
  "compilerOptions": {
    "allowJs": true,
    "esModuleInterop": true,
    "verbatimModuleSyntax": false
  }
}

jest.config.ts:

import type { JestConfigWithTsJest } from 'ts-jest';
import { defaultsESM } from 'ts-jest/presets';

const config: JestConfigWithTsJest = {
  ...defaultsESM,
  moduleNameMapper: {
    '^(.+)\\.js$': '$1',
  },
  preset: 'ts-jest/presets/js-with-ts-esm',
};

export default config;