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-stack: v6.2.1-
Next.js: v12.3.1-
jest: v23.3.1I've followed the
Next.js docs on the jest setup (with the Rust Compiler) https://nextjs.org/docs/testing#setting-up-jest-with-the-rust-compilerI 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
wagmi client so I had to import a few packages from wagmi to my test file like so:import { 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.js file like filters and transformIgnorePatters but nothing helped with transforming the wagmi esm enabled library.I went to the
jest docs and started reading - I can fix it using the ECMAScript Modules support https://jestjs.io/docs/ecmascript-modulesI ended up adding
extensionsToTreatAsEsm: [".ts", ".tsx"] to my jest.config.js fileand now I can just use my test with
nodejs flag:NODE_OPTIONS=--experimental-vm-modules npx jest -- src/__tests__/Wallet.test.tsx Everything works, amazing!
Few days goes by and I need to mock a hook!
I go to
jest docs again and read on how to mock modules in ESM mode. https://jestjs.io/docs/ecmascript-modules#module-mocking-in-esmNope, 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
imoprt wagmi since it's ESM enabled.So 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.
