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

Angular2 Directive that Duplicates a Group of <tr> Elements

Ways to add a string to an array as a labeled object in javascript?

Press anywhere on the screen to conceal the AngularJS element

Tips for styling a React JS component class

A more efficient method for incorporating types into props within a functional component in a TypeScript-enabled NextJS project

Experimenting with JavaScript within an Immediately Invoked Function Expression

Issue: Incorrect hook usage. Hooks are designed to be used within the body of a function component. This error may occur due to one of the following reasons: 1

Is it possible to use an Enum as a type in TypeScript?

Removing an article from a Vue.js localStorage array using its index position

What is the best way to swap the values of options between two input select elements?

Preventing jQuery from removing child elements while inserting data through ajax

What could be causing this JavaScript if statement to malfunction?

clicking a table row will activate the *ngFor directive

Can you provide the regular expression that will successfully match this specific string of text?

Encountering a 404 error when attempting to post from a Node.js express app to a

The most efficient method for retrieving data in React

I am struggling to set up angular-localstorage4

Import JSON Data into Angular-nvD3 Chart (AngularJS)

Upgrading the entire document's content using jQuery

Tips for correctly specifying the theme as a prop in the styled() function of Material UI using TypeScript