Support for ESM 3rd party npm modules
Hi all,
I'm between a rock and a hard place.
I've created my app using:
-
-
-
I've followed the
I also included https://wagmi.sh/ (React Hooks for Ethereum) to my project, so far all great and dandy until I started testing my components.
In one of my test files I had to create a mocked
And then I run the test:
So the first issue I've come across was the classic:
I tried multiple different options in the
I went to the
I ended up adding
and now I can just use my test with
Everything works, amazing!
Few days goes by and I need to mock a hook!
I go to
Nope, I can't mock hooks! Tried million different setups.
Ok, so I go back to my original setup without ESM support.
Yes! Now I can mock hooks! Yay!
Not so fast, now I'm back at square one, because I can't
So how do I import ES modules 3rd party libs ?
I'm between a rock and a hard place.
I've created my app using:
-
t3-stackv6.2.1-
Next.jsv12.3.1-
jestv23.3.1I've followed the
Next.jsjestI also included https://wagmi.sh/ (React Hooks for Ethereum) to my project, so far all great and dandy until I started testing my components.
In one of my test files I had to create a mocked
wagmiwagmiimport { Client, createClient, WagmiConfig, useConnect } from "wagmi";And then I run the test:
So the first issue I've come across was the classic:
.../node_modules/wagmi/dist/index.js:2
import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister";
^^^^^^
SyntaxError: Cannot use import statement outside a module
I tried multiple different options in the
jest.config.jsfilterstransformIgnorePatterswagmiI went to the
jestI ended up adding
extensionsToTreatAsEsm: [".ts", ".tsx"]jest.config.jsand now I can just use my test with
nodejsNODE_OPTIONS=--experimental-vm-modules npx jest -- src/__tests__/Wallet.test.tsxEverything works, amazing!
Few days goes by and I need to mock a hook!
I go to
jestNope, I can't mock hooks! Tried million different setups.
Ok, so I go back to my original setup without ESM support.
Yes! Now I can mock hooks! Yay!
Not so fast, now I'm back at square one, because I can't
imoprtwagmiSo how do I import ES modules 3rd party libs ?
wagmi is a collection of React Hooks containing everything you need to start working with Ethereum. wagmi makes it easy to "Connect Wallet," display ENS and balance information, sign messages, interact with contracts, and much more — all with caching, request deduplication, and persistence.
Learn how to set up Next.js with three commonly used testing tools — Cypress, Playwright, Jest, and React Testing Library.
Was this page helpful?
