how to work with next/local-font and cypress component testing

[gael-boyenval]

Subject

how to configure cypress component testing to work with next local-font

Description

as the next documentation here :
https://nextjs.org/docs/pages/building-your-application/optimizing/fonts#local-fonts

I'm not able to figure out how to load fonts using this next plugin into my components

cypress/support/component.tsx :

// Alternatively you can use CommonJS syntax:
// require('./commands')
import theme, { aktivBold, aktivRegular, aktivLight } from '../../src/styles/theme';
import { mount } from 'cypress/react18';
import { ThemeProvider } from '@mui/material';
import React from 'react';
import '../../src/styles/globals.css'; // Import global styles
import '../../src/styles/theIconOf.css';

// Augment the Cypress namespace to include type definitions for
// your custom command.
// Alternatively, can be defined in cypress/support/component.d.ts
// with a <reference path="./component" /> at the top of your spec.
declare global {
    namespace Cypress {
        interface Chainable {
            mount: typeof mount;
        }
    }
}

Cypress.Commands.add('mount', (component, options = {}) => {
    return mount((
        <>
            <div className={`${aktivRegular.variable} ${aktivLight.variable} ${aktivBold.variable}`}>
                <ThemeProvider theme={theme}>
                    {component}
                </ThemeProvider>
            </div>
        </>
    ), options);
});

the content of the loaded theme, where I use the plugin :

import { createTheme, Shadows } from '@mui/material/styles';
import localFont from 'next/font/local';

export const aktivRegular = localFont({
    src: './AktivGroteskCd-Regular.woff2',
    weight: '500',
    variable: '--font-aktiv-regular'
});

export const aktivBold = localFont({
    src: './AktivGroteskCd-Bold.woff2',
    weight: '800',
    variable: '--font-aktiv-bold'
});

export const aktivLight = localFont({
    src: './AktivGroteskCd-Light.woff2',
    weight: '300',
    variable: '--font-aktiv-light'
});

export default createTheme({
  // ...MUI theme using var(--font-aktiv-regular) etc...
})

cypress.config.ts :

import { defineConfig } from 'cypress';

export default defineConfig({
    component: {
        screenshotOnRunFailure: false,
        video: false,
        experimentalSingleTabRunMode: true,
        devServer: {
            framework: 'next',
            bundler: 'webpack'
        }
    }
});

used versions :

"@next/font": "^13.3.4",
"next": "13.2.4",
"@testing-library/cypress": "^9.0.0",
"cypress": "^12.11.0",

[lmiller1990]

Your code looks good to me. Are you able to provide a minimal reproduction?

Is there any 404 requests in the network tab (eg, for fonts that are not loaded?)

Also do you mind sharing how you use the fonts in the entry to your Next.js app?

[mike-plummer]

Unfortunately we have to close this issue due to inactivity. Please comment if there is new information to provide concerning the original issue and we can reopen.