-
-
Notifications
You must be signed in to change notification settings - Fork 153
What about images? #11
Comments
I used https://github.com/mfncooper/mockery to solve the same issue. It allows you to globally mock mockery.enable();
mockery.registerMock('../Images/Logo/some_image.png', 'nice image'); In your tests and this will affect all the files that require '../Images/Logo/some_image.png'. Another similar tool is https://github.com/thlorenz/proxyquire |
thanks! |
This is a great question. Perhaps we could build a method where you can pass it a glob string for images and it will automatically register them as image objects in the require cache. Open to hear anyone else's suggestions as well... |
If I use mockery tests are working, but instead of a dir error I was getting the following:
|
@latusaki you cannot require an image in JS. React Native seems to have some kind of a wrapper around |
@Jeiwan In my module I have: In my test file I have:
|
I guess you have tried not disabling mockery? |
@latusaki That worked, thanks! |
If I remember correct the effect of mockery does not persist between test cases, so I have just added it like this:
|
Hey Guys, Thanks for your help I've been able to fix the require problem.
|
@slamus The best way to mock an image objects source would be to pass it something it's expecting.
The image doesnt have to exist or anything, but it's a better way of mocking it than just passing in a random value |
I ran into the same issue today, and what i did was the following (im using jest):
but it can't compile images, so it returns the source (which is the image itself).
So i return a string for every image require i have, which is very convenient for testing: |
Hey, trying your solutions here, but not sure what I'm doing wrong.
import React, { View, Text, StyleSheet } from 'react-native';
import mockery from "mockery";
import { shallow } from 'enzyme';
import { expect } from 'chai';
mockery.enable();
mockery.registerMock('../src/Theme/assets/closeWhite.png', { uri: 'myimage.png' }); //
import { CloseButton } from '../src';
describe('<CloseButton />', () => {
it('should render stuff', () => {
const wrapper = shallow(<CloseButton />);
expect(wrapper.length).to.equal(1);
});
});
/*
/node_modules/babel-core/lib/transformation/file/index.js:556
throw err;
^
/src/Theme/assets/closeWhite.png: Unexpected character '�' (1:0)
> 1 | �PNG
| ^
*/ |
@benjick Can you post the source of the |
I didn't want to mock all image paths manually, so I made this hook:
|
@miracle2k oohh that's really nice! Could you submit that as a PR? Maybe putting it in |
@miracle2k how can I use this hook with react-native-mock? |
hey @slamus can u provide a repo with your solution? |
@RealOrangeOne I think we should create a gitter room to discuss solutions for these issues |
I was thinking about doing something like that, let me look into it further before I create something |
for import mockery from 'mockery';
mockery.enable();
mockery.registerMock('./menu_burger.png', 'burguer');
mockery.registerMock('./back_chevron.png', 'chevron'); |
I'm running my tests with mocha and found mocha-image-compiler useful when testing components which require images. See my example repository for examples: react-native-unit-tests. It comes with downside though: You will get a prop type warning when running the tests, but I'll rather take the warning than leave components untested. |
@varmais Wow, that's really nice! Although yes the prop warning would get annoying. It's definately much easier than using mockery! We could fork that library and add it in, conditionally obviously. |
Well, the solution of @miracle2k can not solve my problem directly because the image name they mock is just the same to the actual image name. But as we all known, if you require an image without So inspired by the code of @miracle2k , I replaced the const m = require('module');
const originalLoader = m._load;
m._load = function hookedLoader(request, parent, isMain) {
if (request.match(/.jpeg|.jpg|.png$/)) {
return { uri: request };
}
return originalLoader(request, parent, isMain);
}; I haven't tried the mockery solution because I use mocha and enzyme as my unit test library and I have a |
Funny that this discussion just arised.. I was working on the same mocking problem independently yesterday and came to a very similar (non-working) solution as @zhaotai ... this will save me many hours of debugging the node module system... it's also not as intrusive as I know |
Just tested the @zhaotai and @miracle2k solution. Works fantastic. Going to be moving this into our default AVA tests for the Ignite project. Now everyone who creates a new Ignite starter will have their work right away. I'll be sure to make more shout outs in the release notes. Thanks! |
O and I"m closing this ticket :) cheers! |
Hmm... I have added the hookLoader for images in my mocha setup file, I don't get the error about images anymore, but I do have the following error: TypeError: Plugin 1 specified in "/node_modules/react-native-router-flux/node_modules/react-native-experimental-navigation/package.json" was expected to return a function but returned "undefined" Anyone got this error? |
I have a file where I require images, but I get the error:
any way we can mock this?
The text was updated successfully, but these errors were encountered: