title: Mocking moment.js react props with jest and enzyme
body: <p><strong>Say i have a child component that takes two moment objects as props such as:</strong></p>
  
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  import moment from 'moment';
  
  class ChildComponent extends React.Component {
      constructor(props) {
          super(props);
      }
  
      startAndEndDateOnSameDay() {
          return this.props.startDate.isSame(this.props.endDate, 'date')
      }
  
      render() {
          let formattedDate;
          if(this.startAndEndDateOnSameDay()) {
              formattedDate = this.props.startDate.format();
          }
          else {
              formattedDate = this.props.endDate.fromNow();
          }
  
          return (
              &lt;div&gt;{formattedDate}&lt;/div&gt;
          );
      }
  }
  
  ChildComponent.propTypes = {
      startDate: PropTypes.instanceOf(moment).isRequired,
      endDate: PropTypes.instanceOf(moment).isRequired
  }
  
  export default ChildComponent;
  
  </code></pre>
  
  <p><strong>And a parent component that passes down two moment objects to the child component like:</strong></p>
  
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  import moment from 'moment';
  import ChildComponent from './ChildComponent';
  
  class ParentComponent extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              startDate: moment(),
              endDate: moment()
          };
      }
  
      render() {
          return (
              &lt;ChildComponent startDate={this.state.startDate} endDate={this.state.endDate}/&gt;
          );
      }
  }
  
  export default ParentComponent;
  </code></pre>
  
  <p><strong>And I am trying to test these components with jest and enzyme with:</strong></p>
  
  <pre><code>import React from 'react';
  import { shallow } from 'enzyme';
  import ParentComponent from '../components/ParentComponent';
  
  describe('&lt;ParentComponent /&gt;', () =&gt; {
      let wrapper;
  
      beforeAll(() =&gt; {
          wrapper = shallow(&lt;ParentComponent/&gt;);
      });
  
      it('should render the component correctly', () =&gt; {
          expect(wrapper).toMatchSnapshot();
      });
  });
  </code></pre>
  
  <p><strong>And</strong></p>
  
  <pre><code>import React from 'react';
  import { shallow } from 'enzyme';
  import ChildComponent from '../components/ChildComponent';
  import moment from 'moment';
  
  describe('&lt;ChildComponent /&gt;', () =&gt; {
      let wrapper;
  
      beforeAll(() =&gt; {
          wrapper = shallow(&lt;ChildComponent startDate={moment()} endDate={moment()}/&gt;);
      });
  
      it('should render the component correctly', () =&gt; {
          expect(wrapper).toMatchSnapshot();
      });
  
      describe('when the the start date and end date are on the same day', () =&gt; {
          it('should print a the formatted start date', () =&gt; {
              expect(wrapper.text()).toEqual('mock format here');
          });
      });
  
      describe('when the start and end date are not on the same day', () =&gt; {
          it('should print the the end date from now', () =&gt; {
              expect(wrapper.text()).toEqual('mock from now here');
          });
      });
  });
  </code></pre>
  
  <p><strong>How do I mock the moment.js library functions in order for my tests to work?</strong></p>
  
  <p>I am trying to create a manual mock file within the <code>__mocks__</code> folder that will mock the moment library's functions for both test suites. The current issues I am running into:</p>
  
  <ol>
  <li>How do i mock the <code>moment()</code> constructor from within the mock file to always return the same date, so my snapshot tests will always pass?</li>
  <li>How do i mock the the <code>.isSame()</code>, <code>.format()</code>, and <code>.fromNow()</code> functions to always return the same value regardless of the current time?</li>
  </ol>
  
  <p>So far, I have the follow test file that breaks all my tests. I was following the documentation <a href="https://jestjs.io/docs/en/manual-mocks.html" rel="nofollow noreferrer">here</a>:</p>
  
  <pre><code>const moment = require('moment');
  
  function isSame() {
    return true;
  }
  
  function fromNow() {
    return 'Tomorrow at 12:00 pm'
  }
  
  function format() {
    return 'Sept 16th 19';
  }
  
  exports.isSame = isSame;
  exports.fromNow = fromNow;
  exports.format = format;
  </code></pre>
  
  <p>When I use this file, i get errors within my component that say startDate and endDate are undefined.</p>