Jest errors with inline SVGs in Next 12.1.1+

[rsanchez]

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 20.6.0: Wed Jan 12 22:22:42 PST 2022; root:xnu-7195.141.19~2/RELEASE_X86_64
Binaries:
  Node: 16.14.2
  npm: 8.5.0
  Yarn: 1.22.18
  pnpm: N/A
Relevant packages:
  next: 12.1.6-canary.3
  react: 17.0.2
  react-dom: 17.0.2

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

When using SVGR (or presumably any other Webpack-based SVG importing library) and inline rendering the imported SVG, I encounter errors in Jest when running tests:

    Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

A minimal example of inline rendering an imported SVG (as opposed to utilizing next/image):

import Vercel from '../public/vercel.svg'

export default function Home() {
  return (
    <div>
      <h1>Welcome to Next.js!</h1>
      <Vercel />
    </div>
  )
}

This is because the next build tool which provides the Jest configuration includes this moduleNameMapper rule:

          // Handle image imports
          '^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$': require.resolve(
            `./__mocks__/fileMock.js`
          ),

This fileMock resolver provides an object which is meant to be supplied to a Next <Image /> component. But in my use case I want to directly render the SVG without next/image.

There is no way to override this image import rule for SVGs in my own jest.config.js.

Related issues:
#34350 (comment)
#33161
#26167

Expected Behavior

Next should provide a configuration option to exclude SVGs from being mocked this way in Jest.

To Reproduce

Repo with reproduction code: https://github.com/rsanchez-forks/next-with-jest-and-svgr

git clone [email protected]:rsanchez-forks/next-with-jest-and-svgr.git
cd next-with-jest-and-svgr
npm install
npm test

[timneutkens]

When you customize webpack configuration you need to make additional adjustments to other tooling as well, we can't provide an out of the box solution for customizations you're adding manually. As such this is not a bug in the Jest config but missing configuration in your application.

Here's how you could apply addition settings / override anything in the Jest config: #35634 (comment)

[David-Rickard]

It requires a not entirely clean workaround; a straightforward application of settings for moduleNameMapper does not work since the earlier built-in entry takes precedence.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.