reactjs - TypeError: (0, _local.default) är inte en funktion när man använder next/font/local i Jest

Jag utvecklar ett UI-bibliotek med MUI, React och TypeScript, med Nx som byggsystem. För teständamål använder jag Jest. Men jag stötte på ett fel när jag försökte lägga till ett typsnitt i mitt projekt enligt instruktionerna som ges i Next.js-dokumentationen.

Kodsnutten som orsakar problemet är följande:

import localFont from 'next/font/local';

const myFont = localFont({ src: './my-font.woff2' });

När jag kör Jest-tester får jag följande felmeddelande:

TypeError: (0, _local.default) is not a function

Jag skulle uppskatta alla insikter eller förslag på hur man kan lösa detta fel och framgångsrikt lägga till typsnittet i mitt projekt samtidigt som jag använder Jest för testning. Tack!

Jag förväntar mig att localFont-funktionen från next/font/local ska importeras och köras framgångsrikt utan några fel i Jest-miljön. Variabeln myFont bör tilldelas det lämpliga värdet, vilket gör att jag kan använda typsnittet i mitt UI-bibliotek. Jag skulle vilja förstå varför felmeddelandet "TypeError: (0, _local.default) är inte en funktion" uppstår och hitta en lösning för att åtgärda det.

Svar #1

Frågan gäller användningen av 'localFont'. Jag hade nyligen samma problem, men lösningen ovan fungerade inte för mig, eftersom jag också använde 'next/font/local'

/*
  NextJS's font optimization has built-in automatic self-hosting for any font file.  The optimization automatically
  downloads any Google font and places Google and local fonts into an app's static assets all at BUILD time.  
  When running tests it's important to mock the module import 'next/font/google' and 'next/font/local' depending on
  which font optimization you're using.

  A mock for the function, localFont().
*/
jest.mock("next/font/local", () => function() {
  return {
        style: {
          fontFamily: 'my_font'
      }
    }
  }
);

Svar #2

Det hände samma sak mig, jag var tvungen att mocka importen i min setupTests-fil, gör det i varje av dina testfiler eller i en generell fil (som jag gjorde):

jest.mock("next/font/local", () => ({
  Rubik: () => ({
    style: {
      fontFamily: "mocked",
    },
  }),
}));

I det här fallet har jag bara mockat det objektet eftersom jag bara använder de egenskaperna i mina tester

Relaterade artiklar