lelandrichardson / lelandrichardson/enzyme-example-react-native
Testing components with images
Nobody has claimed this yet.
- Dominant language
- Objective-C
- Stars
- 86
- Forks
- 26
- PR merge metrics
- No merged PRs in 30d
Description
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
> react-native-xx@0.0.2 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]",
}]]
}
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the Mocha command shown in the issue and inspect src/Theme/index.js, the referenced closeWhite.png asset, and the .babelrc configuration. Determine how the example project should handle image imports during component tests; done means a documented, reproducible example or configuration that avoids the reported PNG and empty-import errors.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- babel, react-native
- Domain
- mobile, testing
- Issue type
- Documentation
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 20/100