Testing components with images

[benjick]

Do you have any example on how to test components with images?

Without doing anything special I get this

> mocha --require react-native-mock/mock.js --compilers js:babel-register --recursive test/*.js

/Users/xx/dev/xxx/react-native-xxi/node_modules/babel-core/lib/transformation/file/index.js:556
      throw err;
      ^

/Users/xx/dev/xxx/react-native-xxi/src/Theme/assets/closeWhite.png: Unexpected character '�' (1:0)
> 1 | �PNG
    | ^
  2 |
  3 |

Introducing babel-plugin-transform-assets gives me the following

> [email protected] test /Users/xx/dev/xx/react-native-xx
> mocha --require react-native-mock/mock.js --compilers js:babel-register --recursive test/*.js

/Users/xx/dev/xx/react-native-xx/node_modules/babel-core/lib/transformation/file/index.js:556
      throw err;
      ^

Error: /Users/xx/dev/xx/react-native-xx/src/Theme/index.js: Found empty import from ./assets/closeWhite.png.
    at PluginPass.CallExpression (/Users/xx/dev/xx/react-native-xx/node_modules/babel-plugin-transform-assets/lib/index.js:63:19)
    at newFn (/Users/xx/dev/xx/react-native-xx/node_modules/babel-traverse/lib/visitors.js:262:19)
    at NodePath._call (/Users/xx/dev/xx/react-native-xx/node_modules/babel-traverse/lib/path/context.js:63:18)
    at NodePath.call (/Users/xx/dev/xx/react-native-xx/node_modules/babel-traverse/lib/path/context.js:47:17)
    at NodePath.visit (/Users/xx/dev/xx/react-native-xx/node_modules/babel-traverse/lib/path/context.js:93:12)

My .babelrc

{
  "presets": ["react-native"],
  "plugins": [["transform-assets", {
                "extensions": ["png"],
                "name": "[name].[ext]?[sha512:hash:base64:7]",
              }]]
}