How to make NextJS 15 dynamic CSS generation blank?

Question

Earlier I was using NextJS 12 version & we stop generating the dynamic CSS class while writing the snapshot in React Testing Library by using the below method:

mocks\styled-jsx\css.js

function css() {}
export const resolve = () => ''    
css.global = () => ''    
css.resolve = resolve    
export default css

& also defined in jext.config.js

const jestConfig = {
  moduleNameMapper: {
    '\\.(css)$': '<rootDir>/__mocks__/styled-jsx/css.js',

When I was running the test case then dynamic CSS class was not generating in snapshot testing.

But when I upgrade to NextJS 15 version, then this css() is not working. I have tried a lot but not getting the answer & dynamic class is generating always.

Please provide the solution if you have any.

No answer till now.

Nishant Pandya
– Nishant Pandya

2025-06-09 06:36:40 +00:00
Commented Jun 9 at 6:36 — Nishant Pandya
– Nishant Pandya, Commented Jun 9 at 6:36

Nishant Pandya · Accepted Answer · 2025-06-13 06:00:00Z

1

To fix the dynamic class generation in Next Js 15.

We have created a file style.js in the location mocks\styled-jsx\style.js & mentioned the below code:

function StyleMock() {
  return null
}

// Add the static dynamic method expected by styled-jsx
StyleMock.dynamic = () => ''

export default StyleMock

& define the path under moduleNameMapper in jest.config.js i.e.

moduleNameMapper: {
    '^styled-jsx/style$': '<rootDir>/__mocks__/styled-jsx/style.js',

answered Jun 13 at 6:00

Nishant Pandya

351 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to make NextJS 15 dynamic CSS generation blank?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related