expect is not defined, while using next/jest.js

[Boby900]

• @testing-library/jest-dom version: ^6.4.6
• node version: v21.1.0
• jest (or vitest) version: ^29.7.0
• npm (or yarn) version: 10.4.0

• react-testing-library version: ^16.0.0

Relevant code or config:

//__tests__index.test.js
import '@testing-library/jest-dom'
import { render, screen } from '@testing-library/react'
import ProfileForm from '@/components/Form'
import { expect } from '@jest/globals';
import '@testing-library/jest-dom/extend-expect'; // for additional matchers

describe('Home', () => {
  it('renders a heading', () => {
    render(<ProfileForm />)
 
    const heading = screen.getByRole('heading', { level: 1 })
 
    expect(heading).toBeInTheDocument()
  })
})

// jest.setup.ts
import { config } from 'dotenv';
config();
import '@testing-library/jest-dom';

//jest.config.ts
import nextJest from "next/jest.js";
import type { Config } from "jest";
const createJestConfig = nextJest({
  dir: "./",
});
const config: Config = {
  clearMocks: true,
  moduleNameMapper: {
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
      "<rootDir>/__mocks__/fileMock.js",
    "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js",
  },
  collectCoverage: true,
  coverageDirectory: "coverage",
  coverageProvider: "v8",
  preset: "ts-jest",
  testEnvironment: "node",
  setupFiles: ["<rootDir>/jest.setup.ts"],
  transform: {
    "^.+\\.tsx?$": "ts-jest",
  },
};
export default createJestConfig(config);

What you did:

I was just trying to run my test and I was using expect

What happened:

my test is not running and it's showing that expect is not defined

Reproduction:

https://github.com/Boby900/yogurt

Problem description:

I am not able to run my test

[Boby900]

I also tried reading this closed issue if I can get some help but not had any luck.

[gnapse]

Could it be because you're importing import nextJest from "next/jest.js"? I'm not sure what that is or how it could impact this.

Alternatively, you could try to extend expect in your own code. See https://github.com/testing-library/jest-dom?tab=readme-ov-file#with-another-jest-compatible-expect

[Boby900]

I have taken this example from the Next.js example,
https://github.com/vercel/next.js/blob/16f5c28cb30e6dcc6561280ad19cba7fc7b2a7d2/examples/with-jest/jest.config.js#L3

@gnapse

[Boby900]

[Boby900]

Could it be because you're importing import nextJest from "next/jest.js"? I'm not sure what that is or how it could impact this.

Alternatively, you could try to extend expect in your own code. See https://github.com/testing-library/jest-dom?tab=readme-ov-file#with-another-jest-compatible-expect

I am not able to understand how to extend 'expect' in my code. Can you please provide me with more context?
Thanks for your help

[gnapse]

I'm not familiar with jest used through what looks like a next.js wrapper around it. So I'm not sure of the exact steps, or even if that'll solve your problem. The link I gave you shows code for what needs to be done, which is basically import expect from your test framework of choice, and then apply the custom matchers to it. I do not know if or how you import expect from this next.js jest wrapper thing.

I'll convert this issue to a discussion, BTW. This seems more like an ask for help to figure your particular situation out. So far I do not see any actionable here, anything that would need to be fixed in the library.

If that discussion ends up being figured out, and there's something we can do in the library to make jest-dom compatible with your situation, we'll do it then. Thanks!

[Boby900]

okay, thanks for your help, now I am thinking of directly importing expect and removing that next.js wrapper around it if that would workaround for now.