[bug] Package throws import errors when running jest test suites

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

0.2.2

wagmi Version

0.4.6

Current Behavior

Package causes jest to throw a ‘Cannot use import statement outside a module’ error

Hello Sers! Digging this project and appreciate all you guys are doing. Running into an issue when running our test suite where this package throws import errors. There are some things we can do on our side to workaround (i.e. mock import, transformIgnorePatterns, etc) but this is not something we’ve had to do for any other dependency.

To rule out our project specifically i’ve created a fresh create-react-app, installed rainbowkit, wagmi, and ethers. When running yarn test we experience the exact same behavior.

I imagine this is something others will soon encounter.

    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:

    /rainbowkit-jest-test/node_modules/@rainbow-me/rainbowkit/dist/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import {

Expected Behavior

Package should not throw import errors when running jest test suite and shouldn’t have to mock package import.

Steps To Reproduce

Checkout: https://github.com/brightiron/rainbowkit-jest-test (Clean create-react-app project with only wagmi, rainbowkit and ethers installed)

Run: yarn install yarn test

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

https://github.com/brightiron/rainbowkit-jest-test

Anything else?

No response

[brightiron]

Quick update from my end. I was able to get our test suite running by appending --transformIgnorePatterns \"node_modules/(?!@rainbow-me)/\" to our test command in package.json. Example:

"test:unit": "react-scripts test --transformIgnorePatterns \"node_modules/(?!@rainbow-me)/\""

However jest now complains at this import import "@rainbow-me/rainbowkit/styles.css"; Cannot find module '@rainbow-me/rainbowkit/styles.css' This style import is documented here in the install instructions: https://www.rainbowkit.com/docs/installation.

The only two workarounds i’ve found are:

• 1. Manually reference rainbowkit styling from inside our own project. (copy the styles from the package and import, yuck).
• 1. add a moduleNameMapper config for jest in package.json and install the identity-obj-proxy package or reference an empty module

  "jest":{
     "moduleNameMapper": {
      "\\.(css)$": "identity-obj-proxy"
    },

The problem with the latter for us is that it increases the runtime of our test suite considerably.

In the longterm, it seems like each of these components in rainbowkit could potentially import their own styles vs relying on a style import from the project the library is installed in. Would also remove an install/configuration step for anyone using the package.

It’d also be awesome if we didn’t have to use --transformIgnorePatterns as this is also affecting test run performance .

Appreciate you guys.

[Arthurgallina1]

Any updates on this? I’m having the same problems and was only able to workaround using @brightiron suggestion, but as mentioned it greatly increased runtime.