Mocking moment.js react props with jest and enzyme

Question

Say i have a child component that takes two moment objects as props such as:

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 (
            <div>{formattedDate}</div>
        );
    }
}

ChildComponent.propTypes = {
    startDate: PropTypes.instanceOf(moment).isRequired,
    endDate: PropTypes.instanceOf(moment).isRequired
}

export default ChildComponent;

And a parent component that passes down two moment objects to the child component like:

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 (
            <ChildComponent startDate={this.state.startDate} endDate={this.state.endDate}/>
        );
    }
}

export default ParentComponent;

And I am trying to test these components with jest and enzyme with:

import React from 'react';
import { shallow } from 'enzyme';
import ParentComponent from '../components/ParentComponent';

describe('<ParentComponent />', () => {
    let wrapper;

    beforeAll(() => {
        wrapper = shallow(<ParentComponent/>);
    });

    it('should render the component correctly', () => {
        expect(wrapper).toMatchSnapshot();
    });
});

And

import React from 'react';
import { shallow } from 'enzyme';
import ChildComponent from '../components/ChildComponent';
import moment from 'moment';

describe('<ChildComponent />', () => {
    let wrapper;

    beforeAll(() => {
        wrapper = shallow(<ChildComponent startDate={moment()} endDate={moment()}/>);
    });

    it('should render the component correctly', () => {
        expect(wrapper).toMatchSnapshot();
    });

    describe('when the the start date and end date are on the same day', () => {
        it('should print a the formatted start date', () => {
            expect(wrapper.text()).toEqual('mock format here');
        });
    });

    describe('when the start and end date are not on the same day', () => {
        it('should print the the end date from now', () => {
            expect(wrapper.text()).toEqual('mock from now here');
        });
    });
});

How do I mock the moment.js library functions in order for my tests to work?

I am trying to create a manual mock file within the __mocks__ folder that will mock the moment library's functions for both test suites. The current issues I am running into:

How do i mock the moment() constructor from within the mock file to always return the same date, so my snapshot tests will always pass?
How do i mock the the .isSame(), .format(), and .fromNow() functions to always return the same value regardless of the current time?

So far, I have the follow test file that breaks all my tests. I was following the documentation here:

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;

When I use this file, i get errors within my component that say startDate and endDate are undefined.

NinjaNachos NinjaNachos · Accepted Answer · 2019-09-20T15:02:19

I ended up solving this by creating a manual mock in the mocks folder. The key is that moment exports it's prototype with moment.fn.

import fixtures from '../__fixtures__/moment';

const moment = require.requireActual('moment');

// By default, the isSame function will always return true
let isSame = true;

moment.fn.isSame = () => isSame;
moment.fn.calendar = () => fixtures.CALENDAR;
moment.fn.fromNow = () => fixtures.FROM_NOW;

// Since format is often called with a variety of format strings, we need to
// differentiate how we are calling the function
moment.fn.format = (format) => {
    switch (format) {
    case 'MMM Do YY':
        return fixtures.DATE;
    case 'H:mm a':
        return fixtures.TIME;
    case 'MMM Do YY H:mm a':
        return fixtures.DATETIME;
    default:
        return Error('Unsupported format in moment mock. Add case to __mocks__/moment.js');
    }
};
moment.duration.fn.humanize = () => fixtures.DURATION;

// This function is added to moment's prototype in order for our tests to
// change moment's isSame behaviour
moment.fn.__isSame = (value) => { isSame = value; };

// This resets the isSame behaviour back to default
moment.fn.__reset = () => {
    moment.fn.isSame = () => true;
};

export default moment;

Jest automatically loads this file when running the tests, and I can then test my components like:

it('renders a moment duration', () => {
    expect(wrapper.text()).toEqual(fixtures.DURATION);
});

If i need to change the behavior of the .isSame function, I can modify it with:

import moment from 'moment';

beforeAll(() => {
    moment.fn.__isSame(false);
});

Mocking moment.js react props with jest and enzyme

2 Answers