Jest require() image broken on Windows

[sam-vdp]

• I have reviewed the documentation
• I have searched existing issues
• I am using the latest React Native version

#13319 changes the way image require('') statements are handled in jest. Since the change, jest-runtime/script_transformer.js is used to transform the image assets.

The regexp ^[./a-zA-Z0-9$_-]+\\.(bmp|gif|jpg|jpeg|png|psd|svg|webp)$ is used to match the assets which should be transformed. However, script_transformer.js tests the regexp not on the asset path as specified in the require statement, but on the actual absolute path. On windows, this might be D:\example\test.png. Neither the colon nor the backslashes are captured by the regexp.

Therefore, no transformation is applied and the test fails because the png file is inserted verbatim into the JS code.

Additionally, the transformer uses path.relative(__dirname, filename) to write the image path to the snapshot file. Since path.relative uses backslashes on Windows, the snapshot tests are not longer portable between OSses.

Environment

Environment:
OS: Windows 7
Node: 8.11.1
Yarn: Not Found
npm: 5.6.0
Watchman: Not Found
Xcode: N/A
Android Studio: Not Found

Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: 0.55.0 => 0.55.0

Steps to Reproduce

Run any jest snapshot test that tests a component with a require('image.png') statement.

Expected Behavior

Tests run successfully.

Actual Behavior

Test fails with error message:

    D:\redacted\ic_lg_arrow_left.png:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,
global,jest){?PNG
             ^

    SyntaxError: Invalid or unexpected token

    > 1 | /* eslint-disable global-require */
      2 | const arrowLeft = {
      3 |   L: require('../../../assets/img/ic_lg_arrow_left.png'),
      4 | };

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/b
uild/script_transformer.js:316:17)
      at Object.<anonymous> (src/ui/styles/Icons.js:1:164)
      at Object.<anonymous> (src/ui/styles/Theme.js:1:256)```

[myrjola]

I'm unfamiliar with how Node handles Windows paths. Should those be accounted for in the regex? Have you tried modifying the regex to match paths like D:\example\test.png?

Try replacing the regex with (I hope I escaped the backslashes correctly).

"^[.:\\\\/a-zA-Z0-9$_-]+\\.(bmp|gif|jpg|jpeg|png|psd|svg|webp)$"

https://regex101.com/r/vu7hHG/1

[sam-vdp]

Yes, modifying the regexp in this fashion works. Additionally, I patched react-native/jest/assetFileTransformer.js to fix the backslashes written into the jest snapshots:

testUri: ${JSON.stringify(path.relative(__dirname, filename).replace(/\\/g, '/'))}

However, if Windows is no longer a supported development platform, I think there should be a warning somewhere...

[myrjola]

As far as I know, Windows is supported as a development environment. Paths tend to cause issues in cross-platform development. I investigated if we could get rid of absolute paths in Jest, but that is likely to break a lot of things. I think the best solution is to simplify the regex to:

"^.+\\.(bmp|gif|jpg|jpeg|png|psd|svg|webp)$"

This will also fix the issue for resolution variations reported in https://github.com/facebook/react-native/pull/13319/files#r149720114.

The patch proposed in #19370 (comment) to assetFileTransformer is also required. I think the proposed solution is robust enough. The same approach of search-and-replace is also used in https://github.com/sindresorhus/slash.

@sam-vdp, could you open a pull request with the proposed fix?

[sam-vdp]

Yes, l'll open a PR as soon as I get around to.