[Bug]: Issue with importing MQTT library in JSDOM test environment

[svallee-wiio]

MQTTjs Version

5.5.0

Broker

EMQX

Environment

Browser

Description

Hi there,

I'm encountering an issue with importing the MQTT library in my JSDOM test environment while trying to consume my custom MQTT library provider hook. When I specify the testEnvironment to be "node" in Jest configuration, the import works perfectly fine. However, when I switch to "jsdom" (which is logical for testing React components), the import fails.

Here are some details about the problem:

I've developed a custom MQTT library provider hook for my project, which is built on top of the MQTT library.
When using testEnvironment: "node", the import statement import mqtt from 'mqtt'; works as expected, allowing me to consume my custom MQTT library provider hook and perform tests.
However, when using testEnvironment: "jsdom", the import statement results in an empty object: {}. This prevents me from testing my React components that use the MQTT library provider hook.
It's worth noting that when I consume my custom MQTT library provider hook from a consumer project (outside of testing environment), everything works perfectly. The issue seems to be specific to Jest and its JSDOM test environment.
I've tried various approaches to resolve the issue, such as configuring Jest's moduleNameMapper or checking for potential conflicts with other libraries, but none have been successful.

I'm seeking assistance in identifying the root cause of this issue and finding a solution to make the MQTT library compatible with the JSDOM test environment in Jest while consuming my custom MQTT library provider hook.

Could you please provide some guidance or suggestions on how to resolve this issue? It seems like a compatibility issue between the MQTT library and JSDOM environment in Jest.

Thank you for your attention to this matter. I'm looking forward to your assistance in resolving this issue.

Best regards

Minimal Reproduction

jes.config.js

const config = {
  globals: {
    'ts-jest': {
      tsConfig: 'tsconfig.test.json',
      diagnostics: false,
    },
  },
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  testMatch: ['**/?(*.)test.ts?(x)'],
  testEnvironmentOptions: {
    'jest-environment-node': {
      testEnvironment: 'node',
    },
  },
};
export default config;

tsconfig.test.json

{
  "compilerOptions": {
    "module": "ES2015",
    "target": "ES2019",
    "lib": ["es6", "dom", "es2016", "es2017", "ES2020", "ESNext"],
    "jsx": "react",
    "rootDir": "src",
    "moduleResolution": "node",
    "baseUrl": "src/",
    "resolveJsonModule": true,
    "types": ["node", "jest"],
    "declaration": true,
    "sourceMap": true,
    "outDir": "./dist",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "skipLibCheck": false
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist", "**/tests/*.test.ts"]
}

Debug logs

mqtt.* is undefined

[robertsLando]

However, when using testEnvironment: "jsdom", the import statement results in an empty object: {}. This prevents me from testing my React components that use the MQTT library provider hook.

Sincerly I have no clue, the logic that serves the mqtt module is described in package.json exports field

MQTT.js/package.json

Lines 38 to 50 in 9fc79df

	"exports": {
	".": {
	"browser": {
	"import": "./dist/mqtt.esm.js",
	"default": "./dist/mqtt.min.js"
	},
	"default": "./build/index.js"
	},
	"./package.json": "./package.json",
	"./*.map": "./build/*.js.map",
	"./dist/*": "./dist/*.js",
	"./*": "./build/*.js"
	},

Browser bundle is created using esbuild