title: Testing images imported in the component with Jest + React Native
body: <p>This is my package.json configuration:</p>
  <pre><code>&quot;jest&quot;: {
      &quot;preset&quot;: &quot;react-native&quot;,
      &quot;transform&quot;: {
        &quot;^.+\\.js$&quot;: &quot;&lt;rootDir&gt;/node_modules/react-native/jest/preprocessor.js&quot;
      },        
      &quot;moduleNameMapper&quot;: {
        &quot;\\.(pdf|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$&quot;: &quot;&lt;rootDir&gt;/__mocks__/fileMock.js&quot;
      }
    },
  </code></pre>
  <p>And I have this image required inside the component:</p>
  <pre><code>const errorImage = require('../../../assets/images/load_error.png');
  </code></pre>
  <p>Which is trying to render this:</p>
  <pre><code>return (
              &lt;Image
                  source={ this.state.source }
                  onError={ this._handleError } 
                  resizeMode={resizeMode}
                  style={[this.props.style, {height: this.state.height, width: this.state.width}]}
              /&gt;
          );
  </code></pre>
  <p>The <code>state.source</code>, after the handle error, is going to return the required errorImage. It works perfectly on the browser, no warnings or errors. But I have some troubles testing with jest.</p>
  <p>But for some reason it cannot find the load_error.png image. This is my folder structure:</p>
  <pre><code>        ___mocks___
          --&gt; fileMocks.js
          --&gt; load_error.png
          __test__
          --&gt; componentes
          --&gt; --&gt; imageComponent.test.js
          components
          --&gt; imageComponent.js
  </code></pre>
  <p>No matter what I do, the error image gets empty.</p>
  <p>This is my test:</p>
  <pre><code>const props = {
      author: 'Random Author',
      isSent: true,
      data:{origin:1},
      attachments:{
          4 : {
              type: 2, //file, pdf, word, etc...
              preview: 'pdf',
              url: 'file.png',
          },
      },
  }
  
  test('renders correctly', () =&gt; {
      const ActIndc = renderer.create(&lt;Attachments {...props} /&gt;).toJSON();
      expect(ActIndc).toMatchSnapshot();
  });
  </code></pre>
  <p>When it don't found the <code>file.png</code> it should look for the error image, which is a require('error.png') inside the image component.</p>
  <p>This is my folder structure:</p>
  <p><a href="https://i.stack.imgur.com/Xcspo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Xcspo.png" alt="enter image description here" /></a></p>
  <p>The test is running in Attachements.test.js testing the attachment.js file, which uses the image component from the ui folder at the bottom of the image.</p>
  <p><strong>Error message from jest:</strong></p>
  <blockquote>
  <p>Cannot log after tests are done. Did you forget to wait for something
  async in your test?
  Attempted to log &quot;Warning: Failed prop type: Invalid prop <code>source</code> supplied to <code>Image</code>.
  in Image (at ....</p>
  </blockquote>