Support for ESM 3rd party npm modules
Hi all,
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.1
I'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-compiler
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 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 moduleI 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-modules
I ended up adding extensionsToTreatAsEsm: [".ts", ".tsx"] to my jest.config.js file
and 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-esm
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 imoprt wagmi since it's ESM enabled.
So how do I import ES modules 3rd party libs ?wagmi: React Hooks for Ethereum – Nextra
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.
ECMAScript Modules · Jest
Jest ships with experimental support for ECMAScript Modules (ESM).
Testing | Next.js
Learn how to set up Next.js with three commonly used testing tools — Cypress, Playwright, Jest, and React Testing Library.
0 Replies