开玩笑的 mocking 和 function 不起作用

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!

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();
  });
});