Exploring the compatibility of Next.js with jest for utilizing third-party ESM npm packages

Question

Exploring the compatibility of Next.js with jest for utilizing third-party ESM npm packages

Caught between the proverbial rock and a hard place.

My app was built using:

t3-stack: v6.2.1 - T3 stack
Next.js: v12.3.1
jest: v29.3.1

Followed Next.js documentation for setting up jest with Rust Compiler at https://nextjs.org/docs/testing#setting-up-jest-with-the-rust-compiler

Introduced https://wagmi.sh/ (React Hooks for Ethereum) to my project, smooth sailing until component testing began.

In order to test, created a mocked wagmi client in a test file by importing necessary packages like this:

import { Client, createClient, WagmiConfig, useConnect } from "wagmi";

Upon running the test, encountered an issue:

.../node_modules/wagmi/dist/index.js:2 import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister"; ^^^^^^
SyntaxError: Cannot use import statement outside a module

Explored various options in jest.config.js including filters and transformIgnorePatterns but no solution for transforming wagmi esm enabled library.

Referenced jest docs and implemented ECMAScript Modules support by adding extensionsToTreatAsEsm: [".ts", ".tsx"] to jest.config.js which allowed running tests with nodejs flag:

NODE_OPTIONS=--experimental-vm-modules npx jest -- src/__tests__/Wallet.test.tsx

Success! Everything worked flawlessly!

Later needed to mock a hook and revisited jest docs on mocking modules in ESM mode, hit a roadblock as I couldn't mock hooks despite trying numerous setups detailed in the issue here.

Reverted to original setup sans ESM support where jest.mock function worked as intended.

However, faced a new challenge of not being able to import wagmi due to its ESM compatibility without ESM support activated.

The question now is how to import npm packages that are ESM modules?

javascript typescript next.js jestjs

Answer 1

Answer №1

I wanted to share my own experience and solution for a common issue:

The main problem arose from the fact that jest does not fully support node ESM mode at this time, causing issues when loading ES modules.

Additionally, there is a specific file in the Next.js distribution version, next/dist/build/jest/jest.js, which complicates overriding the testPathIgnorePatterns configuration option.

To address these challenges, you have two options:

Utilize
```
NODE_OPTIONS=--experimental-vm-modules
```
with jest, although it may limit the usage of jest.mock functionality (as discussed here).
Alternatively, you can modify the Next.js jest config file, as detailed in this discussion. This approach involves transpiling ESM modules before running tests, which was the path I chose.

Answer 2

I wanted to share my own experience and solution for a common issue:

The main problem arose from the fact that jest does not fully support node ESM mode at this time, causing issues when loading ES modules.

Additionally, there is a specific file in the Next.js distribution version, next/dist/build/jest/jest.js, which complicates overriding the testPathIgnorePatterns configuration option.

To address these challenges, you have two options:

Utilize
```
NODE_OPTIONS=--experimental-vm-modules
```
with jest, although it may limit the usage of jest.mock functionality (as discussed here).
Alternatively, you can modify the Next.js jest config file, as detailed in this discussion. This approach involves transpiling ESM modules before running tests, which was the path I chose.

Answer 3

Answer №2

Encountered the same issue when working with NextJS and Wagmi.

To address the issue, I followed the solution provided above by using

NODE_OPTIONS=--experimental-vm-modules

in the test command and adding

extensionsToTreatAsEsm: [".ts", ".tsx"]

to my jest.config.js. However, I faced a new problem:

Reference error: jest is not defined

. To resolve this, I installed @jest/globals using pnpm add @jest/globals and imported jest in every test file as follows:

import { jest } from "@jest/globals"

This is how my final jest.config.js looks like:

const nextJest = require('next/jest')

const createJestConfig = nextJest({
  dir: './',
})

const customJestConfig = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  testEnvironment: 'jest-environment-jsdom',
  extensionsToTreatAsEsm: [".ts", ".tsx"],
  transform: {},
}

module.exports = createJestConfig(customJestConfig)

For running tests, I use the following command:

"test": "NODE_OPTIONS=--experimental-vm-modules jest --ci --silent",

Answer 4

Encountered the same issue when working with NextJS and Wagmi.

To address the issue, I followed the solution provided above by using

NODE_OPTIONS=--experimental-vm-modules

in the test command and adding

extensionsToTreatAsEsm: [".ts", ".tsx"]

to my jest.config.js. However, I faced a new problem:

Reference error: jest is not defined

. To resolve this, I installed @jest/globals using pnpm add @jest/globals and imported jest in every test file as follows:

import { jest } from "@jest/globals"

This is how my final jest.config.js looks like:

const nextJest = require('next/jest')

const createJestConfig = nextJest({
  dir: './',
})

const customJestConfig = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  testEnvironment: 'jest-environment-jsdom',
  extensionsToTreatAsEsm: [".ts", ".tsx"],
  transform: {},
}

module.exports = createJestConfig(customJestConfig)

For running tests, I use the following command:

"test": "NODE_OPTIONS=--experimental-vm-modules jest --ci --silent",

Answer 5

Answer №3

Instead of using jest, I decided to switch to vitest and found that it worked seamlessly by simply following the configuration provided in this particular repository: https://github.com/vercel/next.js/tree/canary/examples/with-vitest

Answer 6

Instead of using jest, I decided to switch to vitest and found that it worked seamlessly by simply following the configuration provided in this particular repository: https://github.com/vercel/next.js/tree/canary/examples/with-vitest

Exploring the compatibility of Next.js with jest for utilizing third-party ESM npm packages

Answer №1

Answer №2

Answer №3

Similar questions

Unable to get the Gtranslate function to function properly within the drop-down menu

What is the best way to implement custom pagination in Material UI?

How can we ensure that React state remains unaltered when modifying an array set to state?

Tips for adjusting the time format within Ionic 3 using TypeScript

Update image attributes (such as src, alt, etc.) after a successful AJAX request (and also help me troubleshoot my AJAX

Preserve setTimeout() Functionality Across Page Refreshes and Navigations

Encountered an issue retrieving audio during recording with Recorder.js

Implement a function to trigger and refresh components in various Vuejs2 instances simultaneously

Utilizing jQuery to Adjust Tab Transparency

What is the process for integrating TypeScript compiling into a JavaScript application?

"Learn how to implement a feature that allows for the acceptance of string input in discord

Disable the function when the mouse is moved off or released

"Implementing autocomplete feature with initial data in Angular 4 using FormControl

Error encountered: Unsuccessful fetch during deployment on Vercel platform using Next.js

AJAX code fetching dynamic content without relying on file loading

Blip Scripts: Converting JSON to JavaScript - Dealing with Undefined Arrays

Vue.js: Attaching a function to a Template

Executing a background.js function in response to an event trigger within the active tab in a Chrome extension

Validate that the input is an array

Best Practice for Delivering JavaScript Files with Node.js Ajax?