title: Mocking a React Component using Jest
body: <p>I'm trying to mock one of my components across all tests.  The reason is that it is using a copy of an older version of D3 in a local package, and this D3 has references to "this.document", which errors out when running Jest tests.  This is probably due to the reasons described here: <a href="https://github.com/facebook/jest/issues/3970" rel="nofollow noreferrer">https://github.com/facebook/jest/issues/3970</a></p>
  
  <p>package.json</p>
  
  <pre><code>  "devDependencies": {
      "enzyme": "^3.7.0",
      "enzyme-adapter-react-16": "^1.7.0",
      "eslint": "5.6.0",
      "eslint-config-airbnb-base": "13.1.0",
      "react-scripts": "^2.0.4",
      "react-test-renderer": "^16.6.3",
      "redux-devtools": "^3.4.1",
      "redux-devtools-dock-monitor": "^1.1.3",
      "redux-devtools-log-monitor": "^1.4.0",
      "redux-logger": "^3.0.6"
    ...
    "scripts": {
      "test": "react-scripts test --env=jsdom --passWithNoTests"
  </code></pre>
  
  <p>src/setupTests.js</p>
  
  <pre><code>import { configure } from 'enzyme';
  import Adapter from 'enzyme-adapter-react-16';
  configure({ adapter: new Adapter() });
  
  import jest from 'jest';
  import BarChart from './components/d3/BarChart/BarChart';
  
  jest.mock('BarChart');
  
  BarChart.render.mockResolvedValue(null);
  </code></pre>
  
  <p>However, when I run npm test, I still get:</p>
  
  <pre><code>TypeError: Cannot read property 'document' of undefined
  
     6 |     return d3_arraySlice.call(list);
     7 |   };
  &gt;  8 |   var d3_document = this.document;
  </code></pre>
  
  <p>coming from the local D3 package.</p>
  
  <p>My test file:</p>
  
  <pre><code>import React from 'react';
  import { shallow, mount } from 'enzyme';
  import App from '../App';
  
  it('renders without crashing - deep', () =&gt; {
    mount(&lt;App /&gt;);
  });
  </code></pre>
  
  <p>App has a component which uses BarChart.</p>