Skip to content

Conversation

@welkinwong
Copy link

Added support for Rsuite6, and updated the versions of react and react-dom in peerDependencies within package.json to >=18 in alignment with Rsuite6. Considering this is a BREAKING CHANGE, rsuite has been specified as ^6.0.0.

@simonguo simonguo changed the base branch from master to next March 17, 2025 08:39
@simonguo
Copy link
Member

Hi @welkinwong
This PR lacks updates to the unit tests. You can run the following command locally to verify if the tests pass:

npm run test

@welkinwong
Copy link
Author

@simonguo When I ran the test, I didn't know how to resolve this issue. It seems like the date-fns library doesn't support CommonJS

pnpm test

> @rsuite/[email protected] test /Users/welkin/code/interactions
> jest

 FAIL  src/__tests__/InteractionManager.test.js
  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
     • 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.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /Users/welkin/code/interactions/node_modules/.pnpm/[email protected]/node_modules/date-fns/locale/en-GB.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { formatDistance } from "./en-US/_lib/formatDistance.js";
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime.createScriptFromCode (node_modules/.pnpm/[email protected]/node_modules/jest-runtime/build/index.js:1350:14)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/locales/en_GB.js:6:13)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/CustomProvider/useCustom.js:10:37)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/CustomProvider/index.js:9:18)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/internals/utils/createComponent.js:13:23)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/internals/utils/index.js:110:24)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/internals/hooks/useStyles.js:10:14)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/internals/hooks/index.js:6:18)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/Text/Text.js:9:14)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/Text/index.js:7:36)

 FAIL  src/__tests__/confirm.test.js
  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
     • 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.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /Users/welkin/code/interactions/node_modules/.pnpm/[email protected]/node_modules/date-fns/locale/en-GB.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { formatDistance } from "./en-US/_lib/formatDistance.js";
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime.createScriptFromCode (node_modules/.pnpm/[email protected]/node_modules/jest-runtime/build/index.js:1350:14)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/locales/en_GB.js:6:13)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/CustomProvider/useCustom.js:10:37)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/CustomProvider/index.js:9:18)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/internals/utils/createComponent.js:13:23)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/internals/utils/index.js:110:24)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/internals/hooks/useStyles.js:10:14)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/internals/hooks/index.js:6:18)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/Text/Text.js:9:14)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/Text/index.js:7:36)

 FAIL  src/__tests__/InteractionModal.test.js
  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
     • 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.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /Users/welkin/code/interactions/node_modules/.pnpm/[email protected]/node_modules/date-fns/locale/en-GB.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { formatDistance } from "./en-US/_lib/formatDistance.js";
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime.createScriptFromCode (node_modules/.pnpm/[email protected]/node_modules/jest-runtime/build/index.js:1350:14)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/locales/en_GB.js:6:13)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/CustomProvider/useCustom.js:10:37)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/CustomProvider/index.js:9:18)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/internals/utils/createComponent.js:13:23)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/internals/utils/index.js:110:24)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/internals/hooks/useStyles.js:10:14)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/internals/hooks/index.js:6:18)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/Text/Text.js:9:14)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/Text/index.js:7:36)

 FAIL  src/__tests__/prompt.test.js
  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
     • 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.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /Users/welkin/code/interactions/node_modules/.pnpm/[email protected]/node_modules/date-fns/locale/en-GB.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { formatDistance } from "./en-US/_lib/formatDistance.js";
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime.createScriptFromCode (node_modules/.pnpm/[email protected]/node_modules/jest-runtime/build/index.js:1350:14)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/locales/en_GB.js:6:13)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/CustomProvider/useCustom.js:10:37)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/CustomProvider/index.js:9:18)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/internals/utils/createComponent.js:13:23)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/internals/utils/index.js:110:24)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/internals/hooks/useStyles.js:10:14)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/internals/hooks/index.js:6:18)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/Text/Text.js:9:14)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/Text/index.js:7:36)

 FAIL  src/__tests__/alert.test.js
  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
     • 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.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /Users/welkin/code/interactions/node_modules/.pnpm/[email protected]/node_modules/date-fns/locale/en-GB.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { formatDistance } from "./en-US/_lib/formatDistance.js";
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime.createScriptFromCode (node_modules/.pnpm/[email protected]/node_modules/jest-runtime/build/index.js:1350:14)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/locales/en_GB.js:6:13)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/CustomProvider/useCustom.js:10:37)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/CustomProvider/index.js:9:18)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/internals/utils/createComponent.js:13:23)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/internals/utils/index.js:110:24)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/internals/hooks/useStyles.js:10:14)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/internals/hooks/index.js:6:18)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/Text/Text.js:9:14)
      at Object.<anonymous> (node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/rsuite/cjs/Text/index.js:7:36)

Test Suites: 5 failed, 5 total
Tests:       0 total
Snapshots:   0 total
Time:        1.522 s
Ran all test suites.
 ELIFECYCLE  Test failed. See above for more details.

@simonguo
Copy link
Member

Try upgrading Jest to the latest version.
If you still encounter errors, try configuring the extensionsToTreatAsEsm parameter in jest.config.js.

@welkinwong
Copy link
Author

@simonguo It's done, all tests have passed.

@simonguo simonguo merged commit 157078b into rsuite:next Mar 18, 2025
3 checks passed
@github-actions
Copy link

🎉 This PR is included in version 2.4.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants