mocking a function with jest isn't working

Question

I've written a basic test to mock a date change function with jest.

like this,

import React from 'react';
import '@testing-library/jest-dom';
import { render, screen } from '@testing-library/react';
import Calendar from './calendar';
/*
Mocks Calendar by providing fake date inputs.


*/
const testData = [
  {
    value: 164,
    day: '2016-02-07',
  },
  {
    value: 152,
    day: '2016-10-15',
  },
  {
    value: 132,
    day: '2018-04-17',
  },
];
//Should mock Dates for tests
const setSelectedDate = jest.fn();

describe('Dashbboard Calendar Graph', () => {
  it('should render the Sentiment graph with no loader element.', () => {
    render(<Calendar data={testData} setSelectedDate={setSelectedDate} startDate={d.getTime()} endDate ={Date.now()} />);
    const heading = screen.getByTestId('calendar');
    expect(heading).toBeInTheDocument();
  });

  it('should show loader for the Sentiment graph if no data is present', () => {
    render(<Calendar data={null} setSelectedDate={setSelectedDate} startDate={d.getTime()} endDate ={Date.now()} />);
    const loader = screen.getByTestId('calendar');
    expect(loader).toBeInTheDocument();
  });
});

The component is like this,

import React from 'react';
import { ResponsiveCalendar } from '@nivo/calendar';
import Loader from './loader';



export default function Calendar({ data, setSelectedDate,startDate,endDate }) {
  return (
    <div               data-testid="calendar"
    style={{ height: 400 }}>
                  {!calendarData && <Loader />}

      <ResponsiveCalendar
        data={!data ? [] : data}
        from={startDate}
        to={endDate}
        emptyColor="#eeeeee"
        colors={['#61cdbb', '#97e3d5', '#e8c1a0', '#f47560']}
        margin={{ top: 20, right: 40, bottom: 20, left: 40 }}
        yearSpacing={40}
        monthBorderColor="#ffffff"
        dayBorderWidth={2}
        dayBorderColor="#ffffff"
        isInteractive={true}
        onClick={({ day }) => setSelectedDate(day)}
        legends={[
          {
            anchor: 'bottom-right',
            direction: 'row',
            translateY: 36,
            itemCount: 4,
            itemWidth: 42,
            itemHeight: 36,
            itemsSpacing: 14,
            itemDirection: 'right-to-left',
          },
        ]}
      />
    </div>
  );
}

Usually the function being passed in is this,

const [selectedDate, setSelectedDate] = useState(
    format(new Date(), "yyyy-MM-dd")
  );

It's returning an error like this,

Dashbboard Calendar Graph > should show loader for the Sentiment graph if no data is present
-----
ReferenceError: d is not defined

Unsure what I'm doing wrong though - I just want to be able to know if the calendar is loading and changing based upon the date range, and date choice really. Confusing!

made the change below, still getting this error,

Dashbboard Calendar Graph > should render the Sentiment graph with no loader element.
-----
ReferenceError: calendarData is not definedJes

Answer 1

As the error states d is not defined.

On your tests you should use getTime() from a Date object not from a d undefined variable.

One way would be to initialize d variable with a new Date() like this

//Should mock Dates for tests
const setSelectedDate = jest.fn();

const d = new Date(); // d is now defined with a Date object.

describe('Dashbboard Calendar Graph', () => {
  it('should render the Sentiment graph with no loader element.', () => {
    render(<Calendar data={testData} setSelectedDate={setSelectedDate} startDate={d.getTime()} endDate ={Date.now()} />);
    const heading = screen.getByTestId('calendar');
    expect(heading).toBeInTheDocument();
  });

  it('should show loader for the Sentiment graph if no data is present', () => {
    render(<Calendar data={null} setSelectedDate={setSelectedDate} startDate={d.getTime()} endDate ={Date.now()} />);
    const loader = screen.getByTestId('calendar');
    expect(loader).toBeInTheDocument();
  });
});