TypeError: (0 , Inter) is not a function

[piranna]

Summary

I'm using vitest to add tests for my Next.js project (first time user of both here) based on the instructions from https://nextjs.org/docs/app/building-your-application/testing/vitest.

Similar to #59701, I'm getting the next error:

 FAIL  src/app/layout.test.tsx [ src/app/layout.test.tsx ]
TypeError: (0 , Inter) is not a function
 ❯ src/components/Fonts.tsx:6:14
      4| import { useServerInsertedHTML } from 'next/navigation';
      5| 
      6| const sans = SansFont({
       |              ^
      7|   subsets: ['latin'],
      8|   variable: '--font-family-sans',
 ❯ src/app/layout.tsx:15:1

src/components/Fonts.tsx is being imported by src/app/layout.tsx, that's being imported by src/app/layout.test.tsx. Full content of src/components/Fonts.tsx is:

'use client';

import { Inter as SansFont } from 'next/font/google';
import { useServerInsertedHTML } from 'next/navigation';

const sans = SansFont({
  subsets: ['latin'],
  variable: '--font-family-sans',
  fallback: ['system-ui', 'Helvetica Neue', 'Helvetica', 'Arial'],
  preload: true,
  weight: ['300', '400', '500', '600', '700', '800'],
});

// replace with your heading font
// by default, it will use the sans font
const heading = sans;

function Fonts() {
  useServerInsertedHTML(() => {
    return (
      <style
        key={'fonts'}
        dangerouslySetInnerHTML={{
          __html: `
          :root {
             --font-family-sans: '-apple-system', 'BlinkMacSystemFont',
              ${sans.style.fontFamily}, 'Segoe UI', 'Roboto', 'Ubuntu',
              'sans-serif';

            --font-family-heading: '-apple-system', 'BlinkMacSystemFont',
              ${heading.style.fontFamily};
          }
        `,
        }}
      />
    );
  });

  return null;
}

export default Fonts;

Problem is that Inter (and by extension, SansFont) is undefined, but content of node_modules/next/font/google/index.js is in fact empty! 😮 So it's exporting an empty object, and obviously everything is undefined. node_modules/next/font/google/index.d.ts just only exports everything from node_modules/next/dist/compiled/@next/font/google/index.js... that in fact exports nothing at all, so also an empty object by default, just throw an exception (that's NOT being thrown, so code is not being executed and seems to be correctly configured):

// Validate next version
const semver = require('next/dist/compiled/semver')
if (semver.lt(require('next/package.json').version, '13.0.0')) {
  throw new Error('`@next/font` is only available in Next.js 13 and newer.')
}

let message = '@next/font/google failed to run or is incorrectly configured.'
if (process.env.NODE_ENV === 'development') {
  message +=
    '\nIf you just installed `@next/font`, please try restarting `next dev` and resaving your file.'
}

message += `\n\nRead more: https://nextjs.org/docs/basic-features/font-optimization`

throw new Error(message)

I'm having some similar issues with other react imports, so it seems something is wrong with the config, but I don't know where to start looking for. Any help or clarification is welcome, so don't doubt asking me.

Additional information

No response

Example

No response

[icyJoseph]

But, to fix your issue you have to mock it, using vi.mock, IIRC.

If your question is why, those are empty, it is because, your file is processed before executed, and those declarations you made, are replaced, either by turbopack, or through a loader, into something like this:

module.exports = {
    "style": {
        "fontFamily": "'Geist Mono', 'Geist Mono Fallback'",
        "fontStyle": "normal"
    },
    "className": "__className_ea5f4b",
    "variable": "__variable_ea5f4b"
};

Which is why you can then do .variable or .className. For me it is still a bit of magic, because then during build, this outputs actual static font files, and maps them correctly into CSS files, and such... Lots going on!

But for your use case, mock should be fine, and as a heads-up, in frontend dev, there's an unfortunate fair amount of mocking. Just make sure that you don't end up testing your own mocks, or as a maintainer of mocks.

[piranna]

But, to fix your issue you have to mock it, using vi.mock, IIRC.

I have seen several solutions suggesting that. That sort of worked, but got later other errors, like

 FAIL  src/app/not-found.test.tsx [ src/app/not-found.test.tsx ]
Error: This module cannot be imported from a Client Component module. It should only be used from a Server Component.
 ❯ Object.<anonymous> node_modules/server-only/index.js:1:7
      1| throw new Error(
       |       ^
      2|   "This module cannot be imported from a Client Component module. " +
      3|     "It should only be used from a Server Component."

or

 FAIL  src/app/home/page.test.tsx [ src/app/home/page.test.tsx ]
Error: [vitest] No "forwardRef" export is defined on the "react" mock. Did you forget to return it from "vi.mock"?
If you need to partially mock a module, you can use "importOriginal" helper inside:

vi.mock(import("react"), async (importOriginal) => {
  const actual = await importOriginal()
  return {
    ...actual,
    // your mocked methods
  }
})

 ❯ src/core/ui/Button.tsx:57:16
     55| }
     56| 
     57| const Button = forwardRef<HTMLButtonElement, CustomButtonProps>(
       |                ^
     58|   (props, ref) => {
     59|     Button.displayName = 'Button';
 ❯ src/app/home/components/BrandButton.tsx:10:1

That I also don't fully understand, and lead me to think maybe mocking was not the solution because they are really strange (I was not confident on that on the first place).

For me it is still a bit of magic

For me too, and I don't like magic in my code, that's why I disliked Angular so much :-) React was pretty simple to code and understand, almost intuitive to me (I designed a similar architecture on my first paid job).

But for your use case, mock should be fine, and as a heads-up, in frontend dev, there's an unfortunate fair amount of mocking.

Ok, I'll give mocking another chance, but didn't see too much examples about how to do it here. Can you give me some links/advices? I know frontend use some mocking, but I though it was just only for the actual servers, not so much agressively with third party libraries, to me it doesn't makes too much sense because your mock behaviour can be different from the libraries one in subtle details.

[icyJoseph]

For the first error, it looks like you may have import "server-only"; somewhere in your code. You need to mock that, so that it doesn't looks for react-server. I haven't done it with vitest, but in Jest, I made something like:

jest.mock('server-only', () => ({}));

And then imported that at the very top of my setup-tests file.

For the second issue, React 19 doesn't support forwardRef anymore.

Things are still simple, and there's very little magic to be honest. It's just that testing in JS is funky like that, specially when you want to test in different JS environments. Remember that the DOM is not present in Node.js, and some Node.js APIs are not present in the browser, etc..