Storybook: Storyshots breaking with latest native storybook

[ritz078]

 FAIL  __tests__/Storyshots.test.js
  ● Test suite failed to run

    /Users/ritz078/projects/agents-app/node_modules/@storybook/react-native/dist/preview/components/OnDeviceUI/menu_open.png:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){�PNG
                                                                                             ^

    SyntaxError: Invalid or unexpected token

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:305:17)
      at Object.<anonymous> (node_modules/@storybook/react-native/dist/preview/components/OnDeviceUI/index.js:51:21)
      at Object.<anonymous> (node_modules/@storybook/react-native/dist/preview/index.js:47:19)

Versions

"@storybook/addon-storyshots": "v3.3.0-alpha.3",
"@storybook/react-native": "v3.3.0-alpha.3",

[danielduan]

We need storyshots in our cra and maybe crna example too so we can test test and catch these regressions.

[brenordr]

I'm getting the same error, It appeared after upgrade from RN48 to RN50,
I suspect that this is due the metro bundler, it's trying import the image as text (very weird, but this "�PNG" is at the beginning of every PNG file if you try open it as text in an editor)

This bug is very annoying since the CI pipeline of my company is locked to accept only commits that pass all stages 😒

[brenordr]

@ritz078

Seems that this issue is with Jest itself.
Just fixed in the env here.

First install the package jest-static-stubs
then:

in package.json
at jest configs:

"moduleNameMapper": {
    ".+\\.(png)$": "jest-static-stubs\$1"
 },

This will add a mock to PNG images, instead try import it.
I've ended creating a custom mock instead of use jest-static-stubs.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 60 days. Thanks!

[hmontes]

the @rodriguesbreno solution worked for me with this package.json configuration

"jest": {
    "preset": "react-native",
    "moduleNameMapper": {
    ".+\\.(png)$": "jest-static-stubs/png"
    }
  }

But, i receive this warning in the console.

console.warn node_modules/react-native/jest/setup.js:99
      Calling .blur() in the test renderer environment is not supported. Instead, mock out your components that use findNodeHandle with replacements that don't rely on the native environment.

I think we need a better solution. Is a jest issue?

[macrozone]

@rodriguesbreno i added

"jest": {
    "preset": "react-native",
    "moduleNameMapper": {
      ".+\\.(png)$": "jest-static-stubs"
    }
  },

but it fails with

```
Configuration error:

Could not locate module ./menu_open.png (mapped as jest-static-stubs)

Please check:

"moduleNameMapper": {
  "/.+\.(png)$/": "jest-static-stubs"
},
"resolver": undefined

````

EDIT: jest-static-stubs was not installed, i seem to have overwritten the package.json while installing the module...