Run custom JavaScript in Chromium with CodeceptJS?

Question

I need to mock the time for my CodeceptJS tests.

My React component uses the new Date() function:

const Component = () => {
    console.log(new Date())
    return <h1>Im a component</h1>
}

I need the component to think it's 2018. For my Jest unit tests this was straightforward:

import MockDate from 'mockdate';

MockDate.set('2018-10');

test("test something", ()=>{
    // Actual test here 
})

MockDate.reset(); 

How can I do the same with CodeceptJS? Ive tried using the date mocking module in the test:

Scenario('@test', async (CheckoutPage) => {
    const MockDate = require('mockdate');
    MockDate.set('2018-10');
     // Actual test here

});

I also tried dependancy injection. The code within FIX-DATE monkey patches the date:

Scenario(
  '@test',
  (CheckoutPage, FixDate) => {
    FixDate();
    CheckoutPage.load();
    pause();
  }
).injectDependencies({ FixDate: require('./FIX-DATE') });

Neither of these have any affect on the date.

Answer 1

The issue is that CodeceptJS is running inside the browser, so you need to override date object of the browser.

Basically you need to override the Date Object of the browser, or the function that is used, for Example:

// create a date object for this Friday:
var d = new Date(2018, 0, 20);
//override Date constructor so all newly constructed dates return this Friday
Date = function(){return d;};

var now = new Date()
console.log(now);

Date.now = function () { return d};
console.log(Date.now());

This is the way to do that in pure JS, the second step is to integrate into codeceptjs, and this can be done using I.executeScript

for Example:

  I.executeScript(function () {
    var d = new Date(2018, 0, 20);
    Date = function(){return d;};
  })

You can also create a custom step, for example, I.fakeDate(new Date(2018, 0, 20))

    module.exports = function() {
      return actor({

        fakeDate: function(date) {

             I.executeScript(function (fakeDate) {
                 var d = fakeDate;
                 window.__original_date = Date;
                 Date = function(){return d;};
             }, date);
        },

        fakeDateRestore: function() {
            I.executeScript(function () {
                 Date = window.__original_date;
            });
        }

      });
    }

Then you just Fake the date when you need, and restore it.

I.Click('beofre');
I.fakeDate(new Date(2018,10,01));
// The test code here
I.fakeDateRestore();

Hope this helps @:-)