[Bug]: Cannot call a class as a function

Component

Other...

Package version

9.54.15

React version

^18.2.0

Environment

System:
    OS: Windows 11 10.0.22631
    CPU: (20) x64 13th Gen Intel(R) Core(TM) i7-13800H
    Memory: 15.45 GB / 31.83 GB
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @fluentui/react-components: ^9.41.0 => 9.45.0
    @fluentui/react-icons: ^2.0.223 => 2.0.225
    @fluentui/react-theme: ^9.1.16 => 9.1.16
    @types/react: ^18.0.0 => 18.2.48
    @types/react-dom: ^18.2.17 => 18.2.18
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0

Current Behavior

Jest tests fail with TypeError: Cannot call a class as a function anywhere we import from @fluentui/react-components after we upgrade from version ^9.41.0. Can build the project without errors though. Example:

FAIL src/views/authoring/components/AuthoringValidationBanner.spec.tsx
  ● Test suite failed to run

    TypeError: Cannot call a class as a function

      4 |
      5 | import React from 'react';
    > 6 | import {
        | ^
      7 |     MessageBar,
      8 |     MessageBarBody,
      9 |     MessageBarIntent,

      at _classCallCheck (node_modules/.pnpm/@fluentui+react-tree@9.8.1_@types+react-dom@18.2.18_@types+react@18.2.48_react-dom@18.2.0_react@18.2.0_scheduler@0.23.0/node_modules/@fluentui/react-tree/lib-commonjs/utils/ImmutableSet.js:1:14)
      at new _classCallCheck (node_modules/.pnpm/@fluentui+react-tree@9.8.1_@types+react-dom@18.2.18_@types+react@18.2.48_react-dom@18.2.0_react@18.2.0_scheduler@0.23.0/node_modules/@fluentui/react-tree/lib-commonjs/utils/ImmutableSet.js:65:31)
      at Object.<anonymous> (node_modules/.pnpm/@fluentui+react-tree@9.8.1_@types+react-dom@18.2.18_@types+react@18.2.48_react-dom@18.2.0_react@18.2.0_scheduler@0.23.0/node_modules/@fluentui/react-tree/lib-commonjs/utils/ImmutableSet.js:72:48)
      at Object.require (node_modules/.pnpm/@fluentui+react-tree@9.8.1_@types+react-dom@18.2.18_@types+react@18.2.48_react-dom@18.2.0_react@18.2.0_scheduler@0.23.0/node_modules/@fluentui/react-tree/lib-commonjs/hooks/useControllableOpenItems.js:22:23)
      at Object.require (node_modules/.pnpm/@fluentui+react-tree@9.8.1_@types+react-dom@18.2.18_@types+react@18.2.48_react-dom@18.2.0_react@18.2.0_scheduler@0.23.0/node_modules/@fluentui/react-tree/lib-commonjs/components/Tree/useTree.js:14:35)
      at Object.require (node_modules/.pnpm/@fluentui+react-tree@9.8.1_@types+react-dom@18.2.18_@types+react@18.2.48_react-dom@18.2.0_react@18.2.0_scheduler@0.23.0/node_modules/@fluentui/react-tree/lib-commonjs/components/Tree/Tree.js:13:18)
      at Object.require (node_modules/.pnpm/@fluentui+react-tree@9.8.1_@types+react-dom@18.2.18_@types+react@18.2.48_react-dom@18.2.0_react@18.2.0_scheduler@0.23.0/node_modules/@fluentui/react-tree/lib-commonjs/components/Tree/index.js:6:16)
      at Object.require (node_modules/.pnpm/@fluentui+react-tree@9.8.1_@types+react-dom@18.2.18_@types+react@18.2.48_react-dom@18.2.0_react@18.2.0_scheduler@0.23.0/node_modules/@fluentui/react-tree/lib-commonjs/Tree.js:6:16)
      at Object.require (node_modules/.pnpm/@fluentui+react-tree@9.8.1_@types+react-dom@18.2.18_@types+react@18.2.48_react-dom@18.2.0_react@18.2.0_scheduler@0.23.0/node_modules/@fluentui/react-tree/lib-commonjs/index.js:124:15)
      at Object.require (node_modules/.pnpm/@fluentui+react-components@9.54.16_@types+react-dom@18.2.18_@types+react@18.2.48_react-dom@18_jkv6ftmyai2zpbyqoofaddnqwy/node_modules/@fluentui/react-components/lib-commonjs/index.js:3121:20)
      at Object.require (src/views/authoring/components/AuthoringValidationBanner.tsx:6:1)
      at Object.<anonymous> (src/views/authoring/components/AuthoringValidationBanner.spec.tsx:9:1)

Expected Behavior

No errors.

Reproduction

problem from using jest

Steps to reproduce

In a project with @fluentui/react-components": "9.54.15" and the following jest.config.js

module.exports = {
    preset: 'ts-jest',
    testEnvironment: 'jsdom',
    setupFilesAfterEnv: ['<rootDir>/jest.env.ts'],
    globalSetup: '<rootDir>/jest.setup.ts',
    moduleNameMapper: {
        '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
            '<rootDir>/src/__mocks__/fileMock.ts',
        '\\.(css|scss|less)$': '<rootDir>/src/__mocks__/styleMock.ts',
        'src/(.*)': '<rootDir>/src/$1',
    },
    testPathIgnorePatterns: ['<rootDir>/node_modules/'],
    transformIgnorePatterns: ['/node_modules/(?!@trident/data-access-artifact)/'],
    transform: {
        '^.+\\.(js|jsx|mjs)$': 'babel-jest',
        '^.+\\.(tsx|ts|html)$': [
            'ts-jest',
            {
                tsconfig: '<rootDir>/src/tsconfig.spec.json',
                isolatedModules: true,
            },
        ],
    },
    testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(tsx|ts)?$',
    coverageReporters: ['cobertura', 'html'],
    collectCoverage: true,
    collectCoverageFrom: [
        'src/**/*.{ts,tsx}',
        '!src/localization/*',
        '!src/assets/*',
        '!src/testUtils/*',
        '!src/telemetry/DummyTelemetry.ts',
        '!src/index.ts',
        '!src/index.ui.tsx',
        '!src/index.worker.ts',
    ],
    coverageDirectory: 'coverage',
};

Run a jest test on a react component that imports from @fluentui/react-components'. You will then see the errorCannot call a class as a function` with a stack trace pointing inside @fluentui/react-components.

Are you reporting an Accessibility issue?

None

Suggested severity

High - No workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] The provided reproduction is a minimal reproducible example of the bug.

microsoft / fluentui