Jest snapshot tests are not working with Image from 'next/image'

alx8437 commented 3 years ago

What example does this report relate to?

jest testing

What version of Next.js are you using?

11

What version of Node.js are you using?

v12.18.2

What browser are you using?

Chrome

What operating system are you using?

lubuntu

How are you deploying your application?

next build

Describe the Bug

After replace an with an component from 'next/Image' tests snapshot aren't work. I think that it becouse of not read string 'import Image from 'next/image'' in my component. As a result, method 'create' from 'react-test-renderer' library is crash

Expected Behavior

Snapshot testing success

To Reproduce

Test is crash here

FAIL components/Main/tests/Main.test.tsx (6.244s) ● Snapshot тест

Failed to parse src "test-file-stub" on `next/image`, if using relative image it must start with a leading slash "/" or be an absolute URL (http:// or https://)

   5 |
   6 | const setUpShallow = (props?) => shallow(<Main {...props} />);
>  7 | const setUpSnapshot = (props?) => renderer.create(<Main {...props} />).toJSON();
     |                                            ^
   8 |
   9 | it('Snapshot тест', () => {
  10 |   const component = setUpSnapshot();

  at load (node_modules/next/client/image.tsx:695:15)
  at loader (node_modules/next/client/image.tsx:253:12)
  at map (node_modules/next/client/image.tsx:224:14)
      at Array.map (<anonymous>)
  at generateImgAttrs (node_modules/next/client/image.tsx:222:8)
  at Image (node_modules/next/client/image.tsx:563:17)
  at renderWithHooks (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5552:18)
  at mountIndeterminateComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7918:13)
  at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9019:16)
  at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12649:12)
  at workLoopSync (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12622:22)
  at performSyncWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12333:9)
  at node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1825:24
  at unstable_runWithPriority (node_modules/scheduler/cjs/scheduler.development.js:653:12)
  at runWithPriority (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1775:10)
  at flushSyncCallbackQueueImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1820:7)
  at flushSyncCallbackQueue (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1808:3)
  at scheduleUpdateOnFiber (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11776:9)
  at updateContainer (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14747:3)
  at Object.create (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15455:5)
  at setUpSnapshot (components/Main/__tests__/Main.test.tsx:7:44)
  at Object.<anonymous> (components/Main/__tests__/Main.test.tsx:10:21)

Code from test file

import React from 'react'; import renderer from 'react-test-renderer'; import Main from '../Main'; import { shallow } from 'enzyme';

const setUpShallow = (props?) => shallow(<Main {...props} />); const setUpSnapshot = (props?) => renderer.create(<Main {...props} />).toJSON();

it('Snapshot тест', () => { const component = setUpSnapshot(); expect(component).toMatchSnapshot(); });

chenrui333 commented 3 years ago

Still seeing this issue with the latest 11.0.2-canary.16 release

afsanefda commented 3 years ago

After upgrading nextjs from 9.4.0 → 9.5.6-canary.18 I'am now facing this issue. All my tests are failing and I believe something is wrong with the versions.

 "resolutions": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-test-renderer": "^17.0.2"
  }

avaleriani commented 3 years ago

I'm having the same issue even after mocking next/image with: jest.mock("next/image", () => { return () => <></>; });

ManuC84 commented 2 years ago

This is still happening to me in 2022, any ideas?

Lozzas-Teachest commented 1 year ago

2023 anyone? We are having this same issue has anyone managed to fix it?

vercel / next.js