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

[brightiron]

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

[nickbytes]

Thanks for the detailed issue and minimal reproducible example @brightiron – we'll check it out!

[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).
• 2. 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.

[bpeters]

Having the same issues when using create-react-app + chakra.

[fritzschoff]

If you are using NextJS there is a known issue where next ignores your transformIgnorePatterns: vercel/next.js#35634

[pyk]

An alternative temporay fix is to mock the rainbowkit like this:

jest.mock("@rainbow-me/rainbowkit", () => ({
    ConnectButton: {
         Custom: jest.fn(),
    },
}));

Add this line to your jest.setup.ts or your test files directly.

[sudoFerraz]

Reproducing the same with latest nextjs + tailwind + wagmi

[sudoFerraz]

I was having issues with mocking only the Connect Button due to how we instantiate our providers and default supported chains, in case anyone is stumbling on the same issue you can mock the getDefaultWallets function in the same way by adding
getDefaultWallets: jest.fn(() => ({})),
to jest.setup.ts

[rocketman-21]

For those of you on NextJS, fixed it locally by mocking the ConnectButton and getDefaultWallets func per @sudoFerraz and @pyk

I can now run jest test locally without problem, however when running in github actions, tests seem to run indefinitely.

Running with the transformIgnorePatterns from @brightiron, I get this locally:

pragma cannot be set when runtime is automatic
,----
39 | /** @jsx jsx */
: ^^^^^^^^^^^^^^^
`----

is there any other way to ignore rainbowkit with Jest tests?

edit:
wagmi's createClient function seems to prevent jest from exiting so our GH Actions ran forever

added
--forceExit flag to the jest command and

jest.mock('@rainbow-me/rainbowkit', () => ({
  ConnectButton: {
    Custom: jest.fn(),
  },
  RainbowKitProvider: jest.fn(),
  getDefaultWallets: jest.fn(() => ({})),
}));

in jest.setup

[smakosh]

Tried solutions above but I'm getting Error: Uncaught [TypeError: (0 , rainbowkit_1.lightTheme) is not a function] as I'm using Rainbowkit's light and dark themes.

[markdalgleish]

We just published a fix for the CSS import issue mentioned above in RainbowKit v0.5.2.

We were using the exports field in package.json to alias dist/index.css as styles.css publicly but Jest doesn't support this, so we've published a fallback resolution method that should work in Jest.

@brightiron I'd be keen to hear how much of an improvement this is to your setup.

[jxom]

Closing this as fixed. Feel free to continue the discussions! If anything else arises, we can reopen this issue.

[brightiron]

We just published a fix for the CSS import issue mentioned above in RainbowKit v0.5.2.

We were using the exports field in package.json to alias dist/index.css as styles.css publicly but Jest doesn't support this, so we've published a fallback resolution method that should work in Jest.

@brightiron I'd be keen to hear how much of an improvement this is to your setup.

@markdalgleish - ty for the fix. lemme do some benchmarking this week and reply here with some results. We're also in process of migrating to vite / vitest for local dev, and I have some mocks created that play nicely with rainbowkit & custom button implementations.
I'll also reply when i get a minute with a more comprehensive mocking strategy. The vitest mocks should also play nicely with jest. may be worthwhile to add these to docs at some point in the future .

Appreciate you guys!

[MateusAndrade]

In case you want to customize the mocked value for the ConnectButton you can mock using this:

jest.mock("@rainbow-me/rainbowkit", () => ({
  ConnectButton: () => <div>ConnectButton</div>,
  ...
}));