title: Mock import/module with Jest in React application
body: <p>I am working on a React application and I want to test one module, let's call it B, that depends on another module, let's call it A.</p>
  
  <p>The scenario could be something like this:</p>
  
  <h2>moduleA.js</h2>
  
  <pre><code>export function helperFn() {
    return { prop1: 10, prop2: 20 };
  }
  </code></pre>
  
  <h2>moduleB.js</h2>
  
  <pre><code>import React from 'react';
  import { helperFn } from '../moduleA';
  
  export class CustomComp extends React.Component {
    render() {
      const helperObj = helperFn();
      return (
        &lt;div&gt;{helperObj.prop1}&lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>The core libraries to test my components are Jest and Enzyme. My goal here is to test module B, but I want to test it in isolation and so I want to mock the dependency on moduleA.js.</p>
  
  <p>I know one way would be to inject the helperFn as a prop instead of importing it so during the test I can inject a mock function, but there are modules quite big on this app that have a few dependencies each of them.</p>
  
  <p>Researching a bit I found it is posible to mock a dependecy using Jest, but I tried many things with no success. I tried approaches from <a href="https://stackoverflow.com/questions/40465047/how-can-i-mock-an-es6-module-import-using-jest">this question</a>, also from <a href="http://madole.xyz/mocking-relative-dependencies-in-jest-with-jest-mock/" rel="nofollow noreferrer">this post</a> and I have no luck. I also read the <a href="https://facebook.github.io/jest/docs/en/manual-mocks.html" rel="nofollow noreferrer">Manual Mocks</a> and <a href="https://facebook.github.io/jest/docs/en/mock-functions.html" rel="nofollow noreferrer">Mock Functions</a> guides from Jest docs, but I think they are pretty confusing.</p>
  
  <p>I could make it work (i.e. I could mock moduleA.js dependency) using the approach on <a href="https://www.jamestease.co.uk/blether/mock-es6-imports-with-jest" rel="nofollow noreferrer">this post</a>, but I had another problem then. It worked just fine to test moduleB.js, but when I went ahead and test moduleA.js, I had to import moduleA.js in moduleA.test.js and I got the mock while I wanted the real module.</p>
  
  <p>So, I need help to understand how I can mock dependency A in moduleB test file.</p>
  
  <p>I hope I was clear if not let me know and I will add the clarifications you might need.</p>
  
  <p>Thanks in advance !</p>