How to handle `responsive-loader` with jest/CRA?

I am using CRA with responsive-loader, and I am getting the following errors:

 FAIL  src/pages/User/test.tsx
  ● Test suite failed to run

    Cannot find module './assets/user_background.jpg?min=320&max=800&steps=3' from 'index.tsx'

    However, Jest was able to find:
        './index.tsx'

    You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently ['web.js', 'js', 'web.ts', 'ts', 'web.tsx', 'tsx', 'json', 'web.jsx', 'jsx', 'node'].

    See https://jestjs.io/docs/en/configuration#modulefileextensions-array-string

      20 | 
    > 21 | const userBackground = require('./assets/user_background.jpg?min=320&max=800&steps=3')
         |                        ^
      22 | 

Are there any solutions to fix the test?

The only way around it I can find it edit my import into const userBackground = require('./assets/user_background.jpg') and so not having any benefits of the loader.

[kopax]

I did overcome the same issue by adding in my jest configuration:

{
  "moduleNameMapper": {
    "\\.(jpg|jpeg|png)\\?format=webp$": "<rootDir>/__mocks__/jpgPngMock.js"},
    "transformIgnorePatterns":[
      "<rootDir>/__mocks__/jpgPngMock.js"
    ]
}

and within __mocks__/jpgPngMock.js:

module.exports = {
  src: '',
  srcSet: '',
  width: 1,
  height: 1,
};

[bitttttten]

I ended up applying the babel-plugin-import-remove-resource-query plugin to jest, and then mocked the file inside the test:

jest.mock('../assets/user_background.jpg', () => ({
    src: '',
    srcSet: '',
    width: 1,
    height: 1,
}))