How to handle `responsive-loader` with jest/CRA? about responsive-loader HOT 7 CLOSED

It looks like the regexp matches everything except js, jsx etc. … why it doesn't match foo.jpg?bar I can't really tell 🤔

Edit: we came to the same conclusion when you edited your comment 😄

from responsive-loader.

OK, so it seems that it's really an issue of Jest itself: jestjs/jest#4181

I'll close this issue since we can't really do anything about that, sorry!

from responsive-loader.

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,
}))

from responsive-loader.

CRA generates a Jest config that mocks certain extensions to empty modules. The patterns don't account for the query string part (the ?min=... part) See here:

https://github.com/facebook/create-react-app/blob/9d70c7afab377c4bec76aa177fadab476ebb115b/packages/react-scripts/scripts/utils/createJestConfig.js#L40-L48

You'd have to change your Jest config to also mock the paths used by responsive-loader.

More infos here: https://jestjs.io/docs/en/webpack#mocking-css-modules

from responsive-loader.

I was digging into that exact line, although it confused me as the fileTransform file includes logic for handling svg files, although svg is not inside the regex. Nor is jpg, jpeg, webp, or png.

Edit: oh, it's a negative lookahead. My regex reading is subpar :p

It feels like jest would pick up the fileTransform file from this regex:

      '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': resolve(
        'config/jest/fileTransform.js'
      ),

Shouldn't fileTransform pick up every other file that is not all of these? So including my import with the query params?

Sorry if this is a jest question now, rather than a responsive-loader one.

from responsive-loader.

So it's an issue with jest. If I solve it, I'll come back here and update my issue for anyone coming from Google :, )

from responsive-loader.

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,
};

from responsive-loader.