Next.JS & JEST - publicRuntimeConfig undefined

Question

I am getting 'publicRuntimeConfig undefined' error while running unit test cases using next.js and Jest

I am using next 9.1.1.I've tried below solutions but it's not working.

• I have set config in jest.setup.js also.Please see below code

  import { setConfig } from 'next/config';
  import config  from './next.config';
  setConfig(config.publicRuntimeConfig);
  

• I've tried using jest mock in test case file.

  jest.mock('next/config', () => () => ({
    publicRuntimeConfig: {
      key: 'abc
    }
  }));
  

Answer 1

It works for me calling jest.mock before the Component Test Case like you mentioned:

jest.mock('next/config', () => () => ({
  publicRuntimeConfig: {
    SOME_VARIABLE_HERE: 'whatever-you-want-here'
  }
}))

I didn't need to create a jest.setup or any other stuff. Those are my dependencies:

"astroturf": "^0.10.4",
"autoprefixer": "^10.0.0",
"axios": "^0.20.0",
"date-fns": "^2.16.1",
"js-cookie": "^2.2.1",
"next": "^9.5.3",
"next-cookies": "^2.0.3",
"node-fetch": "^2.6.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"styled-components": "^5.2.0"
"@babel/preset-env": "^7.11.5",
"@babel/preset-react": "^7.10.4",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.0.4",
"babel-plugin-styled-components": "^1.11.1",
"jest": "^26.4.2"

Answer 2

I solved this problem by creating a jest.setup.js file and adding this line of code

// jest.config.js

module.exports = {
  // Your config
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
};

And add

// jest.setup.js

import { setConfig } from 'next/config'
import config from './next.config'

// Make sure you can use "publicRuntimeConfig" within tests.
setConfig(config)