Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to run localFont() in jest: (0 , local_1.default) is not a function #55616

Open
1 task done
arthur-zhao-anrok opened this issue Sep 19, 2023 · 1 comment
Open
1 task done
Labels
bug Issue was opened via the bug report template. Font (next/font) Related to Next.js Font Optimization.

Comments

@arthur-zhao-anrok
Copy link

Link to the code that reproduces this issue

https://github.com/arthur-zhao-anrok/next_bug_repro_repo

To Reproduce

  1. cd reproduction-app/
  2. npm install
  3. npm run test

Current vs. Expected behavior

Current behavior: the test errs out with the following error:

/Users/xxxx/Github/next_bug_repro_repo/reproduction-app/app/font_util.js:4
var aktivGrotesk = (0, local_1.default)({
                                       ^

TypeError: (0 , local_1.default) is not a function
    at Object.<anonymous> (/Users/arthurzhao/Github/next_bug_repro_repo/reproduction-app/app/font_util.js:4:40)
    at Module._compile (node:internal/modules/cjs/loader:1119:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1173:10)
    at Module.load (node:internal/modules/cjs/loader:997:32)
    at Module._load (node:internal/modules/cjs/loader:838:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:18:47

Node.js v18.8.0

Expected behavior: the test should run successfully.

Verify canary release

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

Provide environment information

Operating System:
   Platform: darwin
   Arch: arm64
   Version: Darwin Kernel Version 21.3.0: Wed Jan  5 21:37:58 PST 2022; root:xnu-8019.80.24~20/RELEASE_ARM64_T6000

Binaries:
   Node: 18.8.0
   npm: 8.18.0
   Yarn: 4.0.0-rc.38
   pnpm: N/A

Relevant Packages:
   next: 13.5.1-canary.1
   eslint-config-next: N/A
   react: 18.2.0
   react-dom: 18.2.0
   typescript: 5.1.3
    
Next.js Config:
   output: N/A

Which area(s) are affected? (Select all that apply)

Font optimization (next/font)

Additional context

I tested my reproduction against both the canary release and v13.4.10.

In my actual production project, I used localFont() in a module called theme.ts that is used by multiple frontend components. It works well in production when those frontend components were used as part of the Next.js frontend app.

However, when I used Jest to test the modules that relies on theme.ts, the tests would err out when importing those modules. I ended up mocking next/font/local to circumvent the issue.

Similar issue on StackOverflow: https://stackoverflow.com/questions/76659367/typeerror-0-local-default-is-not-a-function-when-using-next-font-local-in-j

@arthur-zhao-anrok arthur-zhao-anrok added the bug Issue was opened via the bug report template. label Sep 19, 2023
@github-actions github-actions bot added the Font (next/font) Related to Next.js Font Optimization. label Sep 19, 2023
@arthur-zhao-anrok
Copy link
Author

This is the hack that I'm using to work around the issue:

In jest.config.js:


module.exports = {
    ...
    moduleNameMapper: {
        /* Somehow Jest is not able to correctly import localFont() and deem it as a non-function, which causes issue during test.
        Mock the `localFont()` function in Next/Font to get the tests working.
        https://stackoverflow.com/questions/76659367/typeerror-0-local-default-is-not-a-function-when-using-next-font-local-in-j
        */
        '^next/font/local$': '<rootDir>/__mocks__/mockNextLocalFont.js',
        ...
    },
    ...
}

In mockNextLocalFont.js:

module.exports = () => ({
    style: {
        fontFamily: 'mocked',
    },
  });

Would love to remove it at some point :).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Issue was opened via the bug report template. Font (next/font) Related to Next.js Font Optimization.
Projects
None yet
Development

No branches or pull requests

1 participant