reactjsnext.jsreact-testing-librarysnapshot-testing

How to make NextJS 15 dynamic CSS generation blank?

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.

enter image description here

Please provide the solution if you have any.

Solution

  • 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',