Using moduleNameMapper to mock out react native static image resources fails if module name is a path

[threesquared]

I am using the following to mock out react native static images:

"moduleNameMapper": {
    "^[./a-zA-Z0-9$_-]+\\.png$": "StaticImageStub"
}

This works when the image is import DeleteIcon from 'delete-icon.png'; but not if it is a path import DeleteIcon from '../images/delete-icon.png'; the stacktrace is below.

Error: Cannot find module '../images/delete-icon.png' from '/Users/ben/Projects/OpenChargeNative/ui/LocationListItem.js'
    at Loader._nodeModuleNameToPath (/Users/ben/Projects/OpenChargeNative/node_modules/jest-cli/src/HasteModuleLoader/HasteModuleLoader.js:404:22)
    at Loader._moduleNameToPath (/Users/ben/Projects/OpenChargeNative/node_modules/jest-cli/src/HasteModuleLoader/HasteModuleLoader.js:376:19)
    at Loader._getNormalizedModuleID (/Users/ben/Projects/OpenChargeNative/node_modules/jest-cli/src/HasteModuleLoader/HasteModuleLoader.js:329:35)
    at Loader._shouldMock (/Users/ben/Projects/OpenChargeNative/node_modules/jest-cli/src/HasteModuleLoader/HasteModuleLoader.js:449:27)
    at Loader.requireModuleOrMock (/Users/ben/Projects/OpenChargeNative/node_modules/jest-cli/src/HasteModuleLoader/HasteModuleLoader.js:787:14)
    at Object.eval (/Users/ben/Projects/OpenChargeNative/ui/LocationListItem.js:9:1844)
    at Loader._execModule (/Users/ben/Projects/OpenChargeNative/node_modules/jest-cli/src/HasteModuleLoader/HasteModuleLoader.js:206:17)
    at Loader.requireModule (/Users/ben/Projects/OpenChargeNative/node_modules/jest-cli/src/HasteModuleLoader/HasteModuleLoader.js:760:14)
    at Object.eval (/Users/ben/Projects/OpenChargeNative/__tests__/LocationListItem-test.js:6:30)
    at Loader._execModule (/Users/ben/Projects/OpenChargeNative/node_modules/jest-cli/src/HasteModuleLoader/HasteModuleLoader.js:206:17)

[cpojer]

@frantic @martinbigio did we change how we do relative images in react-native?

[martinbigio]

no, we didn't...

[JaxGit]

Maybe try Automatic Mocking. @threesquared

/image
└── mocks

         └── index.js            // empty file

└── index.js
└── a.png
└── b.png

within /image/index.js
module.exports = {
a: require('./a.png'),
b: require('./b.png')
};

within component:
import * as images from '../images';

BTW, moduleNameMapper (without empty mock index.js) worked for me when there was no testPathDirs.
However it took so much setup time during test without testPathDirs, and moduleNameMapper didn't work when I set testPathDirs, so I ended up with this workaround.

[cpojer]

This should work using jest@next, fixed in #599.

[jonestheguitar]

Has anyone successfully mocked out a React Native "../images/abc.png" require using moduleNameMapper?
As far as I can tell this bug is still present on master.

It looks like the IS_PATH_BASED_MODULE_NAME regex in HasteModuleLoader._getNormalizedModuleID() causes an attempt to resolve relative requires via _resolveModuleName() and _resolveNodeModule() and the latter throws the error mentioned above.

[jonestheguitar]

Note that I have a fix (with updated test case, npm test passing) here: jonestheguitar@05a1456
I'm not quite set up to create pull requests yet but if someone wants to grab it that would be great.

[cpojer]

Currently working on a fix but it breaks some internals.

[cpojer]

This'll be fixed in the next release! Thanks @jonesdar for helping to troubleshoot it.

See b01ab18

[cpojer]

0.10.0 has been released with a fix for this :)

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.