1
  1. I have the functional component "order". It has a lot of unimportant code (in this context I mean) and there are a few "new Date()" calls.
  2. When the test snapshot of this component is creating, "new Date()" returns the current date object. Hence if I run test for this component at least one moment later, snapshots will differ from each other.
  3. Thus I have tried to mock "new Date()" somehow like this:
    import renderer from 'react-test-renderer';

    test('TestName', async () => {
        let componentRenderer = null;

        const now = new Date('2000-01-01T10:00:00.135Z');
        jest.spyOn(global, 'Date').mockImplementation(() => now);
        await renderer.act(async () => {
          componentRenderer = await renderer.create(<Order orderId={0} />);
        });

        const orderFormComponent = componentRenderer.toJSON();
        expect(orderFormComponent).toMatchSnapshot();
      });

  1. It doesn't work at all. It is always a regular "new Date()" call. I mean it works just fine if you call it right in the testing code below the mock lines. But I need mocked "new Date()" to be called inside my functional component when it is being created here:

    renderer.create(<Order orderId={0} />)

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Anton Makarov
  • 31
  • 4
  • 1
    Don't use `new Date();`. Create a function that returns a new Date object and use that in all of your code. Then, in the tests, mock that function. – Heretic Monkey Feb 23 '22 at 16:27
  • @Heretic Monkey thanks a lot, so easy, finally did it. But anyway, isn't there a way to mock `new Date()` which is called from the functional component? – Anton Makarov Feb 23 '22 at 19:19
  • 1
    Does this answer your question? [How to mock a constructor like new Date()](https://stackoverflow.com/questions/28504545/how-to-mock-a-constructor-like-new-date) – Heretic Monkey Feb 23 '22 at 19:21

1 Answers1

0

I've found this approach to be the most generic one:

  1. Create a MockDate:
export class MockDate extends Date {
    constructor(arg) {
        super(arg || 1);
    }
}
  1. Use the created mock in jest:
beforeAll(() => {
    global.Date = MockDate as DateConstructor;
});

afterAll(() => {
    global.Date = Date;
});

Then, in your tests, console.log(new Date()) === MockDate 1970-01-01T00:00:00.001Z

doublethink13
  • 633
  • 8
  • 19