next/jest feedback

[timneutkens]

Feedback thread for the new experimental next/jest Jest transformer.

[theoludwig]

Hello! 👋 @timneutkens

Thanks for making jest configuration easier (#31246)!

Ideas of improvements

• Default config should include testEnvironment: 'jsdom', because we are testing our components with the DOM.
• We can't include files from the root project, for example, I have i18n.json at the root and in tsconfig.json I have "baseUrl": ".", so I should be able to import it like that:

import i18n from 'i18n.json'

With the current config, this is not working in jest, to make it work, we can change the default config to include moduleDirectories: ['node_modules', './']

• Using styled-jsx prints a warning message to the console:
  
• This one is subjective, it depends if you want to prioritize best practices over configuration and it seems like it is what Next.js is doing.
  Many projects do testing with cypress and jest together, we might ignore cypress folder by default: modulePathIgnorePatterns: ['<rootDir>/cypress']

jest.config.js

Currently

const nextJest = require('next/jest')

const createJestConfig = nextJest()
const customJestConfig = {
  moduleDirectories: ['node_modules', './'],
  modulePathIgnorePatterns: ['<rootDir>/cypress'],
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: [
    '@testing-library/jest-dom/extend-expect',
    '@testing-library/react'
  ]
}

module.exports = createJestConfig(customJestConfig)

After improvements

const nextJest = require('next/jest')

const createJestConfig = nextJest()
const customJestConfig = {
  setupFilesAfterEnv: [
    '@testing-library/jest-dom/extend-expect',
    '@testing-library/react'
  ]
}

module.exports = createJestConfig(customJestConfig)

[felipecesr]

Please note that it is important that moduleDirectories works with "baseUrl": "src".

[addepar-ioc-jeff]

I'm also having an issue with styled-jsx:

Warning: Received `true` for a non-boolean attribute `jsx`.

[SimplyComplexable]

Is there any update on setting the testEnvironment default to jsdom?

[stefanprobst]

continuing from #30174 (comment)

• how can i use just the jest transformer (without the additional config handling), so it is possible to use it when configuring jest via package.json or jest.config.json? i.e. is there a public export for next/dist/build/swc/jest-transformer?
• what is the suggested approach to dealing with image imports and next/image? currently, image imports are mocked to strings/filepaths - would it make sense to make this { src: 'img', width: 100, height: 100 } or something similar (if static image imports are not disabled), or is the suggestion to mock next/image itself.

[stefanprobst]

the second point has been addressed in #34350 by @balazsorban44 - thanks!

[martinfrancois]

Thanks for bringing this forward! We tried it and unfortunately some of our tests are failing, for example:

TypeError: Cannot read properties of undefined (reading 'mockRestore')
      61 |         jest
      62 |           .spyOn(generatedBackendApi, 'retrieveUserinfo')
    > 63 |           .mockImplementation(() => {
         |                         ^

See the CI log for all errors, with the following Next.js folder and this jest.config.js.

[martinfrancois]

I found a workaround, in our case the error only appears when mocking useRouter from next/router, not when mocking anything else for some reason.

So I removed mocking of useRouter and changed our usage of useRouter in the code itself to the following:

const { pathname } = useRouter() || { pathname: '/' };

When running a test, useRouter() will return null, at which point it will use { pathname: '/' } instead, and will not result in it trying to destructure null (which results in the error "Cannot destructure property 'pathname' of '(0 , _router).useRouter(...)' as it is null." in our case without mocking, when not using || { pathname: '/' }).

[rtrembecky]

oof, you should never change code in order to satisfy tests.
how do you provide wrapper/context for your tests? I created a custom wrapper for tests which includes the next's RouterContext, something like this:

export const Wrapper: FC<WrapperProps> = ({ children, pageParams, locale }) => (
  // add next's router provider to support calling useRouter calls
  <RouterContext.Provider value={{ ...mockedRouter, query: { pageParams }, locale }}>
    {children}
  </RouterContext.Provider>
)

the mockedRouter is this object:

// inspired by: https://github.com/lifeiscontent/storybook-addon-next-router/blob/master/src/decorators.tsx
export const mockedRouter: NextRouter = {
  locale: defaultLocale,
  basePath: "/",
  route: "/",
  pathname: "/",
  query: {},
  asPath: "/",
  push(..._args: unknown[]) {
    return Promise.resolve(true)
  },
  replace(..._args: unknown[]) {
    return Promise.resolve(true)
  },
  reload(..._args: unknown[]) {
    return Promise.resolve()
  },
  back(..._args: unknown[]) {
    return Promise.resolve()
  },
  prefetch(..._args: unknown[]) {
    return Promise.resolve()
  },
  beforePopState(..._args: unknown[]) {
    return Promise.resolve()
  },
  events: {
    on(..._args: unknown[]) {
      return Promise.resolve()
    },
    off(..._args: unknown[]) {
      return Promise.resolve()
    },
    emit(..._args: unknown[]) {
      return Promise.resolve()
    },
  },
  isFallback: false,
  isLocaleDomain: false,
  isReady: true,
  isPreview: false,
}

then I have this custom render function:

import { render as originalRender } from "@testing-library/react"

// custom wrapper render function for the render of @testing-library/react
export const render = (children: ReactNode, context: WrapperProps = {}) =>
  originalRender(<Wrapper {...context}>{children}</Wrapper>)

and finally in my jest test I call:

    render(<Dashboard />, {
      pageParams: ["dashboard", "home"],
      locale: "en",
    })

hope I helped 😅 🤞

[samuelhnrq]

I got two different issues my first one I'm pretty sure is the same as, @martinfrancois 's. My guess is that the magical auto-hoisting of jest.mock calls after transpiling into commojs present on babel-jest is not working / has not been ported? I got the following stack trace:

    TypeError: _posts.usePosts.mockReturnValue is not a function

      22 | it('should render multiple posts', () => {
      23 |   const posts = generatePostList(2)
    > 24 |   usePosts.mockReturnValue({ data: posts, isFetching: false })

Which for me makes the error pretty obvious, the only way for mockReturnValue not to be a function is if usePosts has not been mocked my guess why tough, is that the call hasn't been hoisted to before the imports as it should've been.

---

The second issue I got is because I'm using some libraries that already have been ported to native node ESM modules. (e.g. react-markdown) the work around I was using is to transpile those modules by whitelisting them in transformIgnorePatterns (like here) since Jest's ESM support is currently a WIP, compiling all that extra stuff tanks the performance as you would expect but it works, sadly I can't do the same workaround here because the 'node_modules' blacklist is hardcoded here. Any ideas? Workarounds?

[ijjk]

Hmm would need a reproduction to investigate further as the above config correctly transpiles an ESM package with pnpm on the with-jest example.

[ctrlaltdylan]

Same issue happening to me with Next ^12.3, SWC complier and next/jest with default options. Not sure why jest isn't mocking properly.

[ctrlaltdylan]

Update, turns out if you import import { jest } from '@jest-globals then it will overwrite the built in jest mocking for jest/next 🤷

So don't try to use Typescript in tests in the meantime.

[sneko]

#31152 (reply in thread) put me on the right track. Thank you @HW13!

If you don't want to manually manage the array since it depends on transpilePackages on the Next.js side, I reused their logic at

next.js/packages/next/src/build/jest/jest.ts

Lines 156 to 173 in 435eca3

	transformIgnorePatterns: [
	// To match Next.js behavior node_modules is not transformed, only `transpiledPackages`
	...(transpiled
	? [
	`/node_modules/(?!.pnpm)(?!(${transpiled})/)`,
	`/node_modules/.pnpm/(?!(${transpiled.replace(
	/\//g,
	'\\+'
	)})@)`,
	]
	: ['/node_modules/']),
	// CSS modules are mocked so they don't need to be transformed
	'^.+\\.module\\.(css|sass|scss)$',
	// Custom config can append to transformIgnorePatterns but not modify it
	// This is to ensure `node_modules` and .module.css/sass/scss are always excluded
	...(resolvedJestConfig.transformIgnorePatterns || []),
	],

since it's not exported.

Here the diff of my workaround:
inclusion-numerique/mediature@cfe3ad8

I would expect an official way to make things clean :) ...

[vjesu5]

You saved my time. Thanks for sharing.

[gabteles]

Hello! I've noticed that next/jest forces NODE_ENV to be production instead of test.
In order to reproduce, I've tried with-jest example with this patch applied:

diff --git a/examples/with-jest/__tests__/index.test.jsx b/examples/with-jest/__tests__/index.test.jsx
index b2fc240af..a24d6117f 100644
--- a/examples/with-jest/__tests__/index.test.jsx
+++ b/examples/with-jest/__tests__/index.test.jsx
@@ -16,4 +16,8 @@ describe('Home', () => {
 
     expect(heading).toBeInTheDocument()
   })
+
+  it('runs in test environment', () => {
+    expect(process.env.NODE_ENV).toEqual('test')
+  })
 })

And it results in:

> yarn test:ci
yarn run v1.22.17
$ jest --ci
"next/jest" is currently experimental. https://nextjs.org/docs/messages/experimental-jest-transformer
 FAIL  __tests__/index.test.jsx
  ● Home › runs in test environment

    expect(received).toEqual(expected) // deep equality

    Expected: "test"
    Received: "production"

      19 |
      20 |   it('runs in test environment', () => {
    > 21 |     expect(process.env.NODE_ENV).toEqual('test')
         |                              ^
      22 |   })
      23 | })
      24 |

      at Object.<anonymous> (__tests__/index.test.jsx:21:30)

 PASS  __tests__/snapshot.js

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 failed, 2 passed, 3 total
Snapshots:   1 passed, 1 total
Time:        1.391 s
Ran all test suites.

[theoludwig]

It's even more weird that with destructuring, it works (the test pass):

it('runs in test environment', () => {
  const { NODE_ENV } = process.env
  expect(NODE_ENV).toEqual('test') // pass ✅
  expect(process.env.NODE_ENV).toEqual('test') // fails ❌
})

[srosato]

Experiencing the same thing where destructuring works, but not using process.env.NODE_ENV, it gives production

[theoludwig]

This has been fixed: #33032! 😄

[matt-sanders]

I seem to be having a similar issue to @samuelhnrq and @martinfrancois above. Mocking doesn't seem to be working correctly. I've set up an example repo here to demonstrate.

Basically, if you call jest.mock('path/to/my/module') it doesn't mock. But if you call jest.spyOn(myModule, 'someFn') it does.

[weyert]

I am having issues with getting jest mocks to work when I am using next/jest . Looks like using expect().toHaveBeenCalledWith() assertions seem to fail. Looks like its similar to the issue that @samuelhnrg @martinfrancois and @matt-sanders are experiencing.

Such as:

    Matcher error: received value must be a mock or spy function

    Received has type:  function
    Received has value: [Function handleAppClose]

or

    TypeError: mockParseCookies.mockReturnValue is not a function

      28 |   })
      29 |
    > 30 |   it('extract session name correctly from cookie', () => {
         |                          ^
      31 |     const sessionData = { id: 'session-id' }
      32 |     const mockParseCookies = parseCookies as jest.Mock
      33 |     mockParseCookies.mockReturnValue({

But mostly see the first happen in my tests.

One of my problematic unit tests:

jest.mock('@/utils/analytics', () => ({
  handleAppClose: jest.fn(),
}))

describe('WidgetLayout', () => {
  beforeEach(() => {
    jest.resetAllMocks()
  })

  test('triggers CLOSE event when clicking on modal background', () => {
    const DummyComponent = () => <div>Lego or K’Nex</div>
    const { container } = renderElement(
      <WidgetLayout>
        <DummyComponent />
      </WidgetLayout>,
    )
    expect(screen.getByText(/Lego/i)).toBeInTheDocument()

    const modalBackground = container.getElementsByTagName('div')[0]
    userEvent.click(modalBackground)
    expect(handleAppClose as jest.Mock).toHaveBeenCalledWith(
      widget-name',
      expect.anything(),
    )
  })
})

[lfjsa]

I've encountered issues related to mocking similar to the ones mentioned here already. In addition I wasn't able to temporarily set window to undefined to test some SSR / noSSR cases.

Here's an isolated reproduction to play with: https://github.com/lfjsa/swc-jest-window-test. Deets in the Readme.

[crutchcorn]

Something I'd love to see better documented is using TypeScript and/or ESM.

In particular, I'm running into a lot of "Unexpected token" errors due to dependencies' export and import logic.

   C:\Users\crutchcorn\git\UnicornUtterances\next-port\node_modules\unified\node_modules\bail\index.js:6
    export function bail(error) {
    ^^^^^^

    SyntaxError: Unexpected token 'export'

Additionally, it seems like ts-jest's pathsToModuleNameMapper doesn't play nice with the jest.config.js that I've ran into. When I try to use it, I get the following errors:

  ● Test suite failed to run

    Configuration error:

    Could not locate module utils/fs/api mapped as:
    ./src/utils/$1.

    Please check your configuration for these entries:
    {
      "moduleNameMapper": {
        "/^utils\/(.*)$/": "./src/utils/$1"
      },
      "resolver": undefined
    }

That utility makes life a lot easier with TSConfig, so it would be nice to have functioning here

[jcheese1]

were u able to fix the "Unexpected token 'export'" error?

[crutchcorn]

@jcheese1 yes I was, but it's not pretty:

https://github.com/unicorn-utterances/unicorn-utterances/blob/23765395eabc217e3aa304d2285e0a592b59480c/jest.config.js#L29

[jordiup]

For anyone still stuck on this one,
I found that the config listed on the Rust Compiler docs page worked 🚀

// jest.config.js
const nextJest = require('next/jest')

// Providing the path to your Next.js app which will enable loading next.config.js and .env files
const createJestConfig = nextJest({ dir: './' })

// Any custom config you want to pass to Jest
const customJestConfig = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
}

// createJestConfig is exported in this way to ensure that next/jest can load the Next.js configuration, which is async
module.exports = createJestConfig(customJestConfig)

[srosato]

Ive noticed that when running tests locally on my machine by running the command jest it loads my environmennt files correctly

"next/jest" is currently experimental. https://nextjs.org/docs/messages/experimental-jest-transformer
info  - Loaded env from /app/.env.test
info  - Loaded env from /app/.env

But on Vercel, it only loads the .env file (when building the preview environment)

yarn run v1.22.17
--
02:08:08.396 | $ yarn test && yarn build
02:08:08.780 | $ jest
02:08:09.139 | "next/jest" is currently experimental. https://nextjs.org/docs/messages/experimental-jest-transformer
02:08:09.143 | info  - Loaded env from /vercel/path0/.env

My workaround for now has been to add the env-cmd package and adding this to my package.json

"scripts": {
// ...
 "test": "env-cmd -f .env.test jest",
// ...
}

[rtrembecky]

The env file resolution is based on the NODE_ENV env var, which should be test for Jest tests... So maybe Vercel somehow overrides this back to production? You can try logging the process.env.NODE_ENV in your tests.

[jakeherp]

Did anyone run into the problem, that Jest doesn't run for components with the following error:

 FAIL   test  src/components/atoms/Container/Container.test.tsx
  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    SyntaxError: /Users/jacobherper/Development/jacobherper.com/src/components/atoms/Container/Container.test.tsx: Support for the experimental syntax 'jsx' isn't currently enabled (6:32):

      4 | describe('Container', () => {
      5 | 	it('renders correctly', () => {
    > 6 | 		const { container } = render(<Container>Content</Container>);
        | 		                             ^
      7 | 		expect(container).toMatchSnapshot();
      8 | 	});
      9 | });

    Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
    If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.

      at Parser._raise (node_modules/@babel/parser/src/parser/error.js:147:45)
      at Parser.raiseWithData (node_modules/@babel/parser/src/parser/error.js:142:17)
      at Parser.expectOnePlugin (node_modules/@babel/parser/src/parser/util.js:205:18)
      at Parser.parseExprAtom (node_modules/@babel/parser/src/parser/expression.js:1221:16)
      at Parser.parseExprSubscripts (node_modules/@babel/parser/src/parser/expression.js:670:23)
      at Parser.parseUpdate (node_modules/@babel/parser/src/parser/expression.js:650:21)
      at Parser.parseMaybeUnary (node_modules/@babel/parser/src/parser/expression.js:621:23)
      at Parser.parseMaybeUnaryOrPrivate (node_modules/@babel/parser/src/parser/expression.js:374:14)
      at Parser.parseExprOps (node_modules/@babel/parser/src/parser/expression.js:384:23)
      at Parser.parseMaybeConditional (node_modules/@babel/parser/src/parser/expression.js:342:23)

It seems to be running under babel, but at the top I see, that next/jest is in fact used:

yarn run v1.22.17
$ jest
"next/jest" is currently experimental. https://nextjs.org/docs/messages/experimental-jest-transformer
warn  - SWC minify beta enabled. https://nextjs.org/docs/messages/swc-minify-enabled

I don't have a babelrc file. Any ideas?

[crice88]

what's your jest.config.js file look like?

[jakeherp]

const nextJest = require('next/jest');

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

const customJestConfig = {
	roots: ['<rootDir>'],
	testMatch: [
		'**/__tests__/**/*.test.ts',
		'**/__tests__/**/*.test.tsx',
		'**/*.test.ts',
		'**/*.test.tsx',
	],
	setupFilesAfterEnv: ['<rootDir>/test/jest.setup.js'],
	testPathIgnorePatterns: [
		'<rootDir>/build/',
		'/dist/',
		'<rootDir>/node_modules/',
		'<rootDir>/test/mockedTypes/',
	],
	moduleFileExtensions: ['js', 'ts', 'tsx', 'json'],
	collectCoverageFrom: [
		'**/src/**/**/*.{js,jsx,ts,tsx}',
		'src/**/*.{js,jsx,ts,tsx}',
		'!src/redux/**/index.ts',
		'!**/src/components/**/*.stories.+(js|ts|tsx)',
		'!**/__tests__/**',
		'!**/node_modules/**',
		'!**/.next/**',
		'!**/build/**',
	],
	coverageThreshold: {
		global: {
			statements: 80,
			branches: 75,
			functions: 80,
			lines: 80,
		},
	},
	projects: ['./test/jest.lint.js', './test/jest.unittest.js'],
};

module.exports = createJestConfig(customJestConfig);

[topbloc-beiswenger]

I'm also seeing this same error. It only occurs when I have a Jest snapshot being taken in the test file (e.g. .toMatchInlineSnapshot())

[alebelcor]

The only workaround that I'm aware of is switching from toMatchInlineSnapshot to toMatchSnapshot + snapshot files. Because it can't update inline snapshots.

[rtrembecky]

Hi, do you get correct coverage and line numbers?

My jest.config.js:

const nextJest = require("next/jest")

const createJestConfig = nextJest({ dir: "." })

// for reference, what's included and how the overrides work:
// https://github.com/vercel/next.js/blob/canary/packages/next/build/jest/jest.ts
const customJestConfig = {
  moduleDirectories: ["node_modules", "src/test"],
  moduleNameMapper: {
    "@/components/(.*)": "<rootDir>/src/components/$1",
    "@/features/(.*)": "<rootDir>/src/features/$1",
    "@/graphql/(.*)": "<rootDir>/src/graphql/$1",
    "@/pages/(.*)": "<rootDir>/src/pages/$1",
    "@/theme/(.*)": "<rootDir>/src/theme/$1",
    "@/types/(.*)": "<rootDir>/src/types/$1",
    "@/utils/(.*)": "<rootDir>/src/utils/$1",
    "@/test/(.*)": "<rootDir>/test/$1",
    "@/toolsSetup/(.*)": "<rootDir>/toolsSetup/$1",
    // jest has troubles resolving this import and it's easier to solve this single case
    //   manually here than looking for a robust config solution
    // eslint-disable-next-line @typescript-eslint/naming-convention
    "graphql-let/__generated__/__types__": "@types/graphql-let/__generated__/__types__.d.ts",
  },
  testEnvironment: "jsdom",
  transform: {
    "^.+\\.graphql$": [
      "graphql-let/jestTransformer",
      { subsequentTransformer: "next/dist/build/swc/jest-transformer" },
    ],
  },
  setupFilesAfterEnv: ["<rootDir>/test/config/setupFiles.ts"],
  // allow SWC to run on typescript code of generated types (to use schema model types)
  //   or cached types (to use enum's code), while still keeping mode_modules disabled
  transformIgnorePatterns: ["node_modules/(?!graphql-let|@types/graphql-let|.cache/graphql-let)"],
  testPathIgnorePatterns: ["<rootDir>/coverage/", "<rootDir>/test/e2e/"],
  collectCoverageFrom: [
    "src/**/*.{js,jsx,ts,tsx}",
    "!**/*.stories.tsx",
    // types (graphql, custom)
    "!**/*.d.ts",
    // example components, not used in production
    "!**/examples/**",
  ],
}

const asyncConfig = createJestConfig(customJestConfig)

module.exports = async () => {
  const config = await asyncConfig()

  // next/jest ignores node_modules and allows to add more ignore patterns, but we need to override them fully to whitelist some node_modules
  // https://github.com/vercel/next.js/blob/canary/packages/next/build/jest/jest.ts
  config.transformIgnorePatterns = customJestConfig.transformIgnorePatterns

  return config
}

Adding this line to the transform: object gives me correct coverage, whereas removing it changes the coverage completely:

"^.+\\.(js|jsx|ts|tsx)$": ["babel-jest", { presets: ["next/babel"] }],

Coverage comparison - SWC on the left, Babel on the right:

[markerikson]

I suspect this is something specific to SWC itself. There's an existing SWC issue for @swc/jest coverage problems at https://github.com/swc-project/jest/issues/21 , and I've seen similar behavior using @swc-node/jest.

[felipelube]

@rtrembecky thanks for you solution. I am using it as a different transformer when collecting coverage:

const isCollectingCoverage = process.argv.includes("--coverage");

return {
  //...
  transform: {
    "^.+\\.(j|t)sx?$": isCollectingCoverage
      ? ["babel-jest", { presets: ["next/babel"] }]
      : ["@swc/jest"],
  },
};

[ctsstc]

I previously had the following which was breaking error line numbers and coverage lines.

'^.+\\.tsx?$': 'ts-jest',
'^.+\\.jsx?$': 'babel-jest',

[ctsstc]

Quick question,,, is next/jest the swc version of Jest?

[jakeherp]

Similar to what is described above, I have trouble with jest.mock as well. This is the error I am getting:

TypeError: Cannot destructure property 'asPath' of '(0 , _router).useRouter(...)' as it is null.

The test that is failing is a very straight forward snapshot test of a navigation item component, for which I mock useRouter():

jest.mock('next/router', () => ({
	useRouter: jest.fn().mockReturnValue({
		asPath: '/some-path',
	}),
}));

describe('NavigationItem', () => {
	it('renders correctly', () => {
		const { container } = render(
			<NavigationItem href="/" title="Some Link" />
		);
		expect(container).toMatchSnapshot();
	});
});

In the component I am using the asPath to set an active class based on this:

	const { asPath } = useRouter();
	const isActive = asPath.startsWith(href);

[bradgarropy]

I'm having trouble with mocking. I've extended the with-jest example to include a hello function from the utils directory. The application works as expected, except when it comes to mocking the hello function. It throws an error while running tests, stating that hello.mockReturnValue() is not a function.

Here is the test for reference.

import { render, screen } from '@testing-library/react'
import Home from '@/pages/index'
import {hello} from "@/utils/hello"

// doesn't work!
jest.mock("@/utils/hello")
const mockHello = hello as jest.MockedFunction<typeof hello>
mockHello.mockReturnValue("Hello World")

// doesn't error, but doesn't work!
jest.mock("@/utils/hello", () => {
  return {hello: () => "Hello World"}
})

describe('Home', () => {
  it('renders a heading', () => {
    render(<Home />)
    expect(screen.getByText("Hello World")).toBeInTheDocument()
  })
})

I also tried mocking the module and providing an implementation. While this does compile correctly, it doesn't seem like it actually mocks the hello function.

And here's the example repository.
https://github.com/bradgarropy/with-jest

[elviocb]

I'm having trouble with mocking. I've extended the with-jest example to include a hello function from the utils directory. The application works as expected, except when it comes to mocking the hello function. It throws an error while running tests, stating that hello.mockReturnValue() is not a function.

Here is the test for reference.

import { render, screen } from '@testing-library/react'
import Home from '@/pages/index'
import {hello} from "@/utils/hello"

// doesn't work!
jest.mock("@/utils/hello")
const mockHello = hello as jest.MockedFunction<typeof hello>
mockHello.mockReturnValue("Hello World")

// doesn't error, but doesn't work!
jest.mock("@/utils/hello", () => {
  return {hello: () => "Hello World"}
})

describe('Home', () => {
  it('renders a heading', () => {
    render(<Home />)
    expect(screen.getByText("Hello World")).toBeInTheDocument()
  })
})

I also tried mocking the module and providing an implementation. While this does compile correctly, it doesn't seem like it actually mocks the hello function.

And here's the example repository. https://github.com/bradgarropy/with-jest

Does anyone found a solution for the issue about jest not mocking the imports? 🤔

[Belco90]

Perhaps the new built-in Jest config could mock useRouter? Not really sure what mock approach would be the best option, but there are several in this other thread: #7479

[ssijak]

I have this mapping for images in jest config:

moduleNameMapper: {
    /* Handle image imports
    https://jestjs.io/docs/webpack#handling-static-assets */
    '^.+\\.(jpg|jpeg|png|gif|webp|svg)$': '<rootDir>/src/__mocks__/fileMock.ts'
  }

And fileMock.ts just exports the same string 'test-file-stub'.

But the issue is that my snapshots have src for images containing [object Object] like this:

<img
    alt="background lines"
    class="chakra-image css-ix2c9f"
    src="[object Object]"
  />

That same image in code was imported like this import bgLinesUrl from './assets/bg-lines.svg';

This worked fine without swc.

[macienrique]

Hey guys, we're trying to use displayName with the new next/jest with Next12 but we're unable to do it, the classNames don't have a user friendly readable name. Is there something else that we have to configure to get this working? Thank you very much in advance! This is how we've setup our next.config.js:

module.exports = {
  compiler: {
    // ssr and displayName are configured by default
    styledComponents: true,
  },
};

and this is the jest.config.js file (just like the example in here:

// jest.config.js
const nextJest = require('next/jest')

// Providing the path to your Next.js app which will enable loading next.config.js and .env files
const createJestConfig = nextJest({ dir })

// Any custom config you want to pass to Jest
const customJestConfig = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
}

// createJestConfig is exported in this way to ensure that next/jest can load the Next.js configuration, which is async
module.exports = createJestConfig(customJestConfig)

[GetafixIT]

this works for me with 12.1.6:

Added webpack rules to next.config.js

config.module.rules.push({
    test: /\.(png|jpg|gif|svg)$/i,
    type: "asset",
    resourceQuery: /url/, // *.svg?url
  });
  config.module.rules.push({
    test: /\.svg$/i,
    resourceQuery: { not: [/url/] },
    use: ["@svgr/webpack"],
  });

This means you can include an SVG like:

import AlertIcon from "../alert.svg";

<Alert /> 

or if you need a dataUrl for image src or a css background image:

import alertIcon from "../alert.svg?url";

moduleNameMapper: {
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/__mocks__/fileMock.js",
    "\\.(svg+[?]+url)$": "<rootDir>/src/__mocks__/svgStr.js",
    "^.+\\.(svg)$": "<rootDir>/src/__mocks__/svg.js",
  },

svgStr.js:

export default "svgStr";

svg.js

import { forwardRef } from "react";

// eslint-disable-next-line react/display-name
const SvgrMock = forwardRef((props, ref) => <span ref={ref} {...props} />);

SvgrMock.displayName = "SvgrMock";

export const ReactComponent = SvgrMock;
export default SvgrMock;

[NoamNol]

This works for me (instead of "\\.svg$" or "^.+\\.svg")

// jest.config.js

moduleNameMapper: {
  '^.+\\.(svg)$': '<rootDir>/__mocks__/svg.js',
}
moduleDirectories: ['node_modules', '<rootDir>/']

Thanks @GetafixIT

[monsonjeremy]

Since updating my lockfile in the last week or so I can no longer stub ES imports/exports using sinon as I get the following:

Descriptor for property default is non-configurable and non-writable

Has there been any change to SWC or next/jest since that causes ESM imports/exports to be non-configurable (I know this is in line with the ESM spec)

Related issue in TS from the past:
microsoft/TypeScript#38568 (comment)

[monsonjeremy]

Seems that doing the following in the next config fixes this:

experimental: {
  esmExternals: 'loose',
}

Seems like SWC has recently changed to be ES spec compliant and make modules non-configurable?

[JavCBDev]

Hi Guys,

We've found some TypeErrors when upgrading to [email protected] and testing with JEST:

index.test

import { render, screen } from '@testing-library/react';
import Home from '../index';
import '@testing-library/jest-dom';
import * as UserUtils from '../../utils/user';

describe('Home', () => {
  it('renders a heading', () => {
    jest.spyOn(UserUtils, 'isUserGuest').mockReturnValueOnce(false);
    
    render(<Home />)

    const heading = screen.getByRole('heading', {
      name: /welcome to next\.js!/i,
    })

    expect(heading).toBeInTheDocument()
  })
});

user.ts

export const isUserGuest = (): boolean => {
  return true;
};

We are using [email protected] with jest installed and configured as mentioned in the docs.

P.S This is not happening with [email protected]

We would really appreciate some feedback/fix/workarounds about it.
Thanks in advance

[ddanngg]

This work for me when migrate to [email protected] and [email protected]

// add to your package.json
"@swc/core": "^1.3.10",
"@swc/jest": "^0.2.23",

// jest.setup.js
// ... your config

const { defineProperty } = Object;
Object.defineProperty = function (object, name, meta) {
  if (meta.get && !meta.configurable) {
    // it might be an ES6 exports object
    return defineProperty(object, name, {
      ...meta,
      configurable: true, // prevent freezing
    });
  }

  return defineProperty(object, name, meta);
};

// jest.config.js
const nextJest = require('next/jest')

const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: './',
})

// Add any custom config to be passed to Jest
const customJestConfig = {
  // .... your config
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  transform: {
     '^.+\\.(t|j)sx?$': ['@swc/jest'],
  },
  testEnvironment: 'jest-environment-jsdom',
}

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig)

[free4mOriginal]

After upgrading Next to 12.3 from 12.1 we're seeing about 10% of all test suites failing with various errors.

1. One of them is the same as @JavCBDev mentioned, but also
2. issues with useRouter - No router instance found.
3. TypeError: Cannot use 'in' operator to search for 'beforePopState' in null
4. some tests are timing out
5. others failing to call mutations

So just to reiterate - the entire test suites passes just fine in 12.1

Any help or guidance is appreciated! We need the upgrade for one of the new features in 12.3.

[themagickoala]

I'm having the Cannot use 'in' operator to search for 'beforePopState' in null issue too, in 12.3.4

[dongme]

I have same issue, does anyone know how to resolve? nextjs is really not stable.

[themagickoala]

@timneutkens think you can help us out here?

[llun]

Just in case anyone still stuck on Cannot use 'in' operator to search for 'beforePopState' in null issue. The problem is, next/link expect it to be inside router context, so when the component with link render with test library without Router context, the router is null and throw this error.

I solved this with this router mock. https://github.com/scottrippey/next-router-mock#compatibility-with-nextlink

[sarahysh12]

Thanks for the tips @llun, adding router context worked for

import { RouterContext } from 'next/dist/shared/lib/router-context'

const router = {
  route: '/',
  pathname: '',
  query: { q: '' },
  asPath: '',
  push: (_url: string) => Promise.resolve(true),
  events: {
    on: () => {},
    off: () => {},
    emit: () => {}
  },
  beforePopState: jest.fn(() => null),
  prefetch: (_url: string) => Promise.resolve(),
  basePath: 'basePath',
  isLocaleDomain: false,
  replace: (_url: string) => Promise.resolve(true),
  reload: () => {},
  back: () => {},
  isFallback: false,
  isReady: false,
  isPreview: false
}

jest.mock('next/router', () => ({
  useRouter() {
    return router
  }
}))

<RouterContext.Provider value={router}>{element}</RouterContext.Provider>

[aqibqamar]

jest.config.js

const nextJest = require('next/jest')
this line create problem for me

Error: Cannot find module 'next/jest'
Require stack:

• /home/justdial/online-consult/jest.config.js
• /home/justdial/online-consult/node_modules/jest-util/build/requireOrImportModule.js
• /home/justdial/online-consult/node_modules/jest-util/build/index.js
• /home/justdial/online-consult/node_modules/jest-config/build/getCacheDirectory.js
• /home/justdial/online-consult/node_modules/jest-config/build/Defaults.js
• /home/justdial/online-consult/node_modules/jest-config/build/normalize.js
• /home/justdial/online-consult/node_modules/jest-config/build/index.js
• /home/justdial/online-consult/node_modules/jest-cli/build/init/index.js
• /home/justdial/online-consult/node_modules/jest-cli/build/run.js
• /home/justdial/online-consult/node_modules/jest-cli/build/index.js
• /home/justdial/online-consult/node_modules/jest-cli/bin/jest.js
• /home/justdial/online-consult/node_modules/jest/bin/jest.js
  at Function.Module._resolveFilename (node:internal/modules/cjs/loader:956:15)
  at Function.Module._load (node:internal/modules/cjs/loader:804:27)
  at Module.require (node:internal/modules/cjs/loader:1028:19)
  at require (node:internal/modules/cjs/helpers:102:18)
  at Object. (/home/justdial/online-consult/jest.config.js:1:18)
  at Module._compile (node:internal/modules/cjs/loader:1126:14)
  at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
  at Module.load (node:internal/modules/cjs/loader:1004:32)
  at Function.Module._load (node:internal/modules/cjs/loader:839:12)
  at Module.require (node:internal/modules/cjs/loader:1028:19)

[rafalnawojczyk]

I'm experiencing the same problem.

[robreinhard]

When using next/jest I've noticed three different issues I wanted to share:

1. Projects doesn't work in custom jest.config.js. You have to define jest projects at the package.json level
2. The reason why I defined multiple projects is because the /pages/api folder should be using node not jsdom. Using jsdom will break the tests, especially if used with next-auth
3. Ignore line coverage does not seem to work. I am not sure if next/jest uses istanbul, but if there's a workaround I would love to know

[mewben]

Hi @robreinhard, I have similar use-case. Did you somehow made it work using multiple projects config? Also, what do you mean "You have to define jest projects at the package.json level"?

[robreinhard]

@mewben I can write up an example. Let me just get approval from the organization I wrote it for.

[flextremedev]

I opened a discussion for istanbul ignore not working here: #49504

[chris-erickson]

Switching all our Jest testing over to use SWC, and it mostly worked ok. Couple things - our tests for Stripe components aren't working as expected anymore. Not really sure what might cause it - mocks not working the same anymore?

The more problematic one is that scss isn't auto mocked with something like identity-obj-proxy: '\\.(css|scss)$': 'identity-obj-proxy',. That's what we used to have but now it doesn't seem to matter either way - class is jsut an empty string now where before it would be simplified (ie. what identity-obj-proxy does). Is there something explicitly needed to get this functionality back?

[weyert]

Could it be that the using next/swc stops the ability to use the /* @jest-environment node */ comment to switch from default jsdom to node?

[robreinhard]

I think better unit testing documentation for api routes is needed, and I've created a thread here to look at it

#43045

[vighnesh153]

@robreinhard Looks like the issue is closed due to inactivity. Do you know if the NextJS team has any update on this?

[robreinhard]

@vighnesh153 A Vercel engineer said they had no plans to support it. I can write up something in the next month or two though that walks through it.

[MaxMEllon]

Error happen when combination v8-to-istanbul and swc (next/jest using this combination).
This problem is not of "next/jest". but, transformed sources everytime by swc when use next/jest.

• jest.config transform section by next/jest

  '^.+\\.(js|jsx|ts|tsx|mjs)$': [
    '.../node_modules/next/dist/build/swc/jest-transformer.js',
    {
      nextConfig: [Object],
      jsConfig: [Object],
      resolvedBaseUrl: '...',
      hasServerComponents: false,
      isEsmProject: false,
      pagesDir: '.../pages'
    }
  ],

• happening error

TypeError: Cannot read properties of undefined (reading 'endCol')
    at module.exports.sliceRange (.../node_modules/v8-to-istanbul/lib/range.js:30:54)
    at .../node_modules/v8-to-istanbul/lib/v8-to-istanbul.js:139:19
    at Array.forEach (<anonymous>)
    at .../node_modules/v8-to-istanbul/lib/v8-to-istanbul.js:125:20
    at Array.forEach (<anonymous>)
    at V8ToIstanbul.applyCoverage (.../node_modules/v8-to-istanbul/lib/v8-to-istanbul.js:124:12)

refs: istanbuljs/v8-to-istanbul#198

• workaround solution
  Overwrite transform section, you can avoid error.

const conf = async () => {
  const nextJestConfig = await createJestConfig()();

  return {
    ...nextJestConfig,
    transform: {
      "^.+\\.(ts|tsx)$": [
        "ts-jest",
        {
          tsconfig: "tsconfig.jest.json",
        },
      ],
    },
  };
};

export default conf;

[kodai3]

I'm having trouble setup next/jest with storybook Import stories.

With jest-babel works as expected, migrating to next/jest it fails to import the config file.

Cannot find module '.storybook/preview' from 'setupFiles.js'

However, Jest was able to find:
	'.storybook/preview.js'

You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently ['js', 'mjs', 'cjs', 'jsx', 'ts', 'tsx', 'json', 'node'].

import * as globalStorybookConfig from './.storybook/preview';
When I remove this line it works, but cannot leverage the global config we need from the storybook.

here is the repro repo based on the with-jest and with-jest-babel examples.

[huypham1411]

Hi, I got issue setting up Jest in my NextJS project, hope someone can help

here is my jest.config.js (I've followed the with-jest example)

const nextJest = require('next/jest');

const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: './',
});

// Add any custom config to be passed to Jest
const customJestConfig = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  testEnvironment: 'jest-environment-jsdom',
  preset: 'ts-jest',
  transformIgnorePatterns: ['node_modules/(?!@azure/msal-react|antd)'],
  transform: {
    '^.+\\.(js|jsx|ts|tsx)?$': 'babel-jest',
    '^.+\\.tsx?$': 'ts-jest',
  },
  moduleNameMapper: {
    '@azure/msal-react': '<rootDir>/mocked/module.js',
  },
};

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig);

and got this error

\node_modules\antd\es\button\index.js:3
import Button from './button';
^^^^^^

SyntaxError: Cannot use import statement outside a module

[sossilica]

Hi All,
Following instructions from the documentation to set up jest with nextjs 14.0.4 I receive errors when testing components using experimental hooks of react. I'm using typescript in the project. The same code started with npm run dev works just fine. Any ideas how to fix this?

TypeError: (0 , _reactdom.useFormState) is not a function or its return value is not iterable

My Jest config:

import type {Config} from 'jest';
import nextJest from 'next/jest.js'

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

const config: Config = {
  coverageProvider: "v8",
  testEnvironment: "jsdom",
};

export default createJestConfig(config);

[Harshil1210]

@sossilica have you found any solution ? i m also stuck on this .

[Sanjay7021]

@sossilica did you found any way to overcome this. I am also stuck here tooo.. @Harshil1210 if you found then, don't forget to reply me...

[Harshil1210]

jest.mock("react-dom", () => {
const originalmodule = jest.requireActual("react-dom");
return {
...originalmodule,
useFormState: () => [{ message: "" }, jest.fn()],
};
});
@sossilica and @Sanjay7021 Try this, It worked for me .

[Sanjay7021]

Thank You @Harshil1210 it works for me tooo..... @sossilica don't forget try this...