next/image causes error while unrelated test to it. #21935

kaznak · 2021-02-07T08:22:59Z

kaznak
Feb 7, 2021

When I am writing a test for a page that uses next/image, I met an error.
My page is not completely related in next/image and the test code is also not but it raises.
This must be a bug of next/image but I have no confidence.
How should I handle this error?

The code is as follows. I started the project from the example with-typescript-eslint-jest and is stored in my repository.

The page, pages/counter.tsx, is the following:

import { useState } from 'react'
import Head from 'next/head'
import Image from 'next/image'

export const Counter = (): JSX.Element => {
  const [count, setCounter] = useState(0)
  const titleString = `${count}`
  return (
    <>
      <Head>
        <title>{titleString}</title>
      </Head>
      <div>
        <p>{titleString}</p>
        <button onClick={() => setCounter(c => c + 1)}>+</button>
      </div>
      {/* following `Image` components raise an error. */}
      <Image src="/vercel.svg" alt="Vercel Logo" width="128" height="34" />
    </>
  )
}

export default Counter

And the test code, test/pages/counter.test.tsx , is following:

import { screen, render, fireEvent, act } from '@testing-library/react'
import { Counter } from '../../pages/counter'

describe('Counter', () => {
  it('Initial Value is 0', () => {
    render(<Counter />)    
    expect(screen.getByText('0', { selector: 'p' }))
  })

  it('Pressing `+` button increments the counter.', () => {
    render(<Counter />)
    expect(screen.getByText('0', { selector: 'p' }))
    act(() => {
      fireEvent.click(screen.getByText('+', { selector: 'button' }))
    })
    expect(screen.getByText('1', { selector: 'p' }))
  })
})

The existence of <Image src="/vercel.svg" alt="Vercel Logo" width="128" height="34" /> in pages/counter.tsx raises the following error.

% yarn test
yarn run v1.22.10
$ jest
jest-haste-map: Watchman crawl failed. Retrying once with node crawler.
  Usually this happens when watchman isn't running. Create an empty `.watchmanconfig` file in your project's root folder or initialize a git or hg repository in your project.
  Error: Watchman error: resolve_projpath: path `/home/kaznak/20210207.next-image-raise-error`: open: /home/kaznak/20210207.next-image-raise-error: Operation not permitted. Make sure watchman is running for this project. See https://facebook.github.io/watchman/docs/troubleshooting.
 PASS  test/pages/index.test.tsx
 PASS  test/pages/counter.test.tsx
  ● Console

    console.error
      Warning: An update to Image inside a test was not wrapped in act(...).
      
      When testing, code that causes React state updates should be wrapped into act(...):
      
      act(() => {
        /* fire events that update state */
      });
      /* assert on the output */
      
      This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
          at Image (/home/kaznak/20210207.next-image-raise-error/node_modules/next/client/image.tsx:189:3)
          at Counter (/home/kaznak/20210207.next-image-raise-error/pages/counter.tsx:6:31)

      at printWarning (node_modules/react-dom/cjs/react-dom.development.js:67:30)
      at error (node_modules/react-dom/cjs/react-dom.development.js:43:5)
      at warnIfNotCurrentlyActingUpdatesInDEV (node_modules/react-dom/cjs/react-dom.development.js:24064:9)
      at dispatchAction (node_modules/react-dom/cjs/react-dom.development.js:16135:9)
      at node_modules/next/client/use-intersection.tsx:53:1
      at node_modules/next/client/request-idle-callback.ts:26:9
      at Timeout.callback [as _onTimeout] (node_modules/jsdom/lib/jsdom/browser/Window.js:643:19)

    console.error
      Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
          at Image (/home/kaznak/20210207.next-image-raise-error/node_modules/next/client/image.tsx:189:3)
          at Counter (/home/kaznak/20210207.next-image-raise-error/pages/counter.tsx:6:31)

      at printWarning (node_modules/react-dom/cjs/react-dom.development.js:67:30)
      at error (node_modules/react-dom/cjs/react-dom.development.js:43:5)
      at warnAboutUpdateOnUnmountedFiberInDEV (node_modules/react-dom/cjs/react-dom.development.js:23914:9)
      at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:21840:5)
      at dispatchAction (node_modules/react-dom/cjs/react-dom.development.js:16139:5)
      at node_modules/next/client/use-intersection.tsx:53:1
      at node_modules/next/client/request-idle-callback.ts:26:9
      at Timeout.callback [as _onTimeout] (node_modules/jsdom/lib/jsdom/browser/Window.js:643:19)

    console.error
      Warning: An update to Image inside a test was not wrapped in act(...).
      
      When testing, code that causes React state updates should be wrapped into act(...):
      
      act(() => {
        /* fire events that update state */
      });
      /* assert on the output */
      
      This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
          at Image (/home/kaznak/20210207.next-image-raise-error/node_modules/next/client/image.tsx:189:3)
          at Counter (/home/kaznak/20210207.next-image-raise-error/pages/counter.tsx:6:31)

      at printWarning (node_modules/react-dom/cjs/react-dom.development.js:67:30)
      at error (node_modules/react-dom/cjs/react-dom.development.js:43:5)
      at warnIfNotCurrentlyActingUpdatesInDEV (node_modules/react-dom/cjs/react-dom.development.js:24064:9)
      at dispatchAction (node_modules/react-dom/cjs/react-dom.development.js:16135:9)
      at node_modules/next/client/use-intersection.tsx:53:1
      at node_modules/next/client/request-idle-callback.ts:26:9
      at Timeout.callback [as _onTimeout] (node_modules/jsdom/lib/jsdom/browser/Window.js:643:19)


Test Suites: 2 passed, 2 total
Tests:       4 passed, 4 total
Snapshots:   1 passed, 1 total
Time:        3.559s
Ran all test suites.
✨  Done in 5.68s.

Answered by mkrtchian

Feb 7, 2021

If you await for the act function like this :

it('Pressing `+` button increments the counter.', async () => {
    render(<Counter />)
    expect(screen.getByText('0', { selector: 'p' }))
    await act(async () => {
      fireEvent.click(screen.getByText('+', { selector: 'button' }))
    })
    expect(screen.getByText('1', { selector: 'p' }))
  })

there is less errors, but a problem still remains :

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

It seems to say that next Image is still doing something asynchron…

View full answer

tarunama · 2021-02-07T08:48:28Z

tarunama
Feb 7, 2021

Maybe solved the following changes.

<Image ... width={128} height={38} ...>

https://nextjs.org/docs/basic-features/image-optimization#image-component

2 replies

kaznak Feb 7, 2021
Author

Thank you for answering, but the error is still raised.

The patch is here.
Or have I misunderstood your suggestion?

tarunama Feb 7, 2021

Oh, Your patch is my suggestion.
Still error happened, we need to another solution.

mkrtchian · 2021-02-07T12:30:53Z

mkrtchian
Feb 7, 2021

If you await for the act function like this :

it('Pressing `+` button increments the counter.', async () => {
    render(<Counter />)
    expect(screen.getByText('0', { selector: 'p' }))
    await act(async () => {
      fireEvent.click(screen.getByText('+', { selector: 'button' }))
    })
    expect(screen.getByText('1', { selector: 'p' }))
  })

there is less errors, but a problem still remains :

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

It seems to say that next Image is still doing something asynchronously that is not finished after the test ends.

And it is even stranger that when removing the first test from counter.test.tsx, the error comes back again.

We can wait for everything to finish in both tests with something like this :

await waitFor(() => expect(screen.getByText('1', { selector: 'p' })))

But it seems to me that we are hiding the problem...

4 replies

kaznak Feb 7, 2021
Author

Thank you for answering. Your 1st patch decreases errors.

But the 2nd patch does not work for me.
As you say the 2nd patch must be just hiding the problem. We need a complete solution.

Anyway, your suggestion pushes forward this situation. Thank you.

mkrtchian Feb 7, 2021

My second patch consisted in adding the waitFor for the 2 tests rendering your Counter component, like here.
It was removing the error and warning for me locally, but not when it was executed on the github CI, so maybe not for you as well.

I just tried by adding an explicit amount of time to wait in an act statement at the end of the 2 tests like here, and it removes the errors/warnings, even on the github CI.

What I meant by hiding the problem is that as the warning says, the Image component is executing some code (including state change) even after its parent (your component Counter) has been unmounted, which indicates a memory leak.

mkrtchian Feb 7, 2021

I recreated a Next.js project from scratch to test your code and I didn't reproduce the error. Finally I found why: if you update @testing-library/react to the latest version 11.2.5, your errors disappear.

kaznak Feb 8, 2021
Author

Thank you for your research. It also works in my environment.

And as React testing library says, I could remove act() and waritFor() from my test code.

This phenomenon suggests the example, with-typescript-eslint-jest, require upgrade packages. I will send a patch to fix this issue.

Thanks again!

NigelGreenway · 2022-10-25T22:34:40Z

NigelGreenway
Oct 25, 2022

I know this is an old thread, but the other solution I found that worked was to mock the <Image /> component with jest.mock('next/image'); - not sure if that will help anyone else?

0 replies

BalanaguYashwanth · 2023-02-07T12:12:40Z

BalanaguYashwanth
Feb 7, 2023

Follow this process - https://blog.jarrodwatts.com/how-to-set-up-nextjs-with-jest-react-testing-library-and-playwright

To resolve issue

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

next/image causes error while unrelated test to it. #21935

{{title}}

Replies: 4 comments 6 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

next/image causes error while unrelated test to it. #21935

Replies: 4 comments · 6 replies

kaznak Feb 7, 2021 Author

kaznak Feb 7, 2021 Author

kaznak Feb 8, 2021 Author

Replies: 4 comments 6 replies

kaznak Feb 7, 2021
Author

kaznak Feb 7, 2021
Author

kaznak Feb 8, 2021
Author