2024-03-14
2475
#nextjs
Atharva Deosthale
100874
Mar 14, 2024 ⋅ 8 min read

Testing Next.js apps with Jest

Atharva Deosthale Web Developer and Designer | JavaScript = ❤ | MERN Stack Developer

Recent posts:

Your AI Has Agency — Here’s How To Architect Its Frontend

Your AI has agency — here’s how to architect its frontend

AI’s not just following orders anymore. If you’re building the frontend, here’s how to design interfaces that actually understand your agent’s smarts.

Rosario De Chiara
Jun 25, 2025 ⋅ 5 min read
how to design apps with Apple Intelligence in mind

How to design apps with Apple Intelligence in mind

Apple Intelligence is here. What does it mean for frontend dev and UX? Explore the core features of the update, do’s and don’ts for designing with Apple Intelligence in mind, and reflect on the future of AI design.

Murat Yüksel
Jun 24, 2025 ⋅ 10 min read
How To Optimize Your Next.js App With After()

How to optimize your Next.js app with after()

Next.js’ after() is a new API that lets you run logic after your route has finished rendering, without blocking the client.

Temitope Oyedele
Jun 24, 2025 ⋅ 11 min read
JavaScript Loops Explained, And Best Practices

JavaScript loops explained, and best practices

JavaScript loops like for, for...of, and for...in are constructs that help run a piece of code multiple times.

Rahul Padalkar
Jun 23, 2025 ⋅ 8 min read
View all posts

8 Replies to "Testing Next.js apps with Jest"

  1. Below error occured,

    Cannot find module ‘react-dom/client’ from ‘node_modules/@testing-library/react/dist/pure.js’

    1. Hey Somnath! This error might have been caused because of your packages not being properly installed. Please delete the “node_modules” folder and run “npm install” again. Make sure you’re importing functions and components from the correct package.

  2. hey, the second test is failed:
    ` it(“adds numbers”, () => {
    render()
    // check if adds properly
    const num1input = screen.getByTestId(“num1”)
    const num2input = screen.getByTestId(“num2”)
    const addButton = screen.getByTestId(“add”)
    const resultArea = screen.getByTestId(“result”)
    fireEvent.change(num1input, { target: { value: 5 } })
    fireEvent.change(num2input, { target: { value: 8 } })
    addButton.click()
    expect(resultArea).toHaveTextContent(“13”)
    })`

    Expected element to have text content:
    13
    Received:
    0

  3. This if for a Next.js Project. It said “As of Jest 28 “jest-environment-jsdom” is no longer shipped by default, make sure to install it separately.” So I did “npm install –save-dev jest-environment-jsdom” and I’ve removed the line “testEnvironment: “jest-environment-jsdom”,” from the “jest.config.js” file. Then it works..!

Leave a Reply