window.performance.mark becomes undefined after timer install

[oliviertassinari]

I have noticed the following behavior in the browser:

import { useFakeTimers } from 'sinon';

console.log('1', window.performance.mark) // '1', function mark() { ... }
clock = useFakeTimers();
console.log('2', window.performance.mark) // '2', undefined

window.performance became a function after calling useFakeTimers. I believe that the issue is coming from this line:
https://github.com/sinonjs/lolex/blob/c08ff362a47e9786bc62da6c37175838bb7bd21e/src/lolex-src.js#L406-L408

One simple workaround is the following:

-clock = useFakeTimers();
+clock = useFakeTimers({
+  toFake: ["setTimeout", "clearTimeout", "setImmediate", "clearImmediate","setInterval", + "clearInterval", "Date"]
+});

[oliviertassinari]

I had to do some digging, the error on my side was coming from this line: https://github.com/facebook/react/blob/v16.0.0/src/renderers/shared/fiber/ReactDebugFiberPerf.js#L81.

[fatso83]

Verified. Here is the test with a browserified transpiled output that can be copy-pasted directly into Chrome for verification. Tested with master (6476935).

test.js.txt
transpiled.js.txt

[benjamingr]

@oliviertassinari wanna take a shot at a PR at this? Otherwise I can probably take a stab

[oliviertassinari]

@benjamingr I'm already pretty busy with Material-UI. Sorry, it's not a priority for me.

[benjamingr]

@oliviertassinari no need to justify or apologize - it's entirely fine if it's not a priority for you - I was merely offering :)

[benjamingr]

@fatso83 I still can't assign myself to issues by the way :D I'll take a stab next week hopefully

[medialwerk]

Is there anyone working at this issue at the moment? :-)

[benjamingr]

sorry, completely forgot about it - can take a look early next week

[medialwerk]

Thank you very much!

[risinglf]

Hi guys, news about this issue? thanks

[fatso83]

@risinglf Feel free to have a go. It's a very minor fix that you can probably make a PR for in 30 mins.

[remojansen]

As a temporary solution, I used the following function:

function useFakeTimers() {
    const timer = sinon.useFakeTimers();
    performance.mark = () => void 0;
    performance.clearMarks = () => void 0;
    performance.measure = () => void 0;
    performance.clearMeasures = () => void 0;
}

const timer = useFakeTimers();

It works with:

• react@16.2.0
• sinon@4.2.0
• enzyme-adapter-react-16@1.1.1
• enzyme@3.3.0

[austintackaberry]

This temporary solution did not work for me using:

• react@16.2.0
• sinon@4.2.2
• enzyme-adapter-react-16@1.1.1
• enzyme@3.3.0

However, @oliviertassinari's workaround did work for me.

[benjamingr]

Going to tackle this now

[benjamingr]

I added a test case as:

describe("issue #136", function () {
    if (performancePresent) {
        it("should clear performance.mark after uninstall", function () {
            var oldMark = performance.mark;
            var clock = lolex.install();
            assert.same(performance.mark, oldMark);
            clock.uninstall();
            assert.same(performance.mark, oldMark);
        });
    }
});

but it passed without any changes - what am I not understanding?

[tarjei]

Hi, any news on this issue?

[tarjei]

This is what I'm seeing:

In my test:

beforeEach(function() {
    console.log('pm0:', performance.mark)
    this.clock = sinon.useFakeTimers()
    console.log('pm1:', performance.mark)
  })
  afterEach(function() {
    console.log('pm2:', performance.mark)
    this.clock.restore()
    console.log('pm3:', performance.mark)
  })

Output:

LOG: 'pm0:', function mark() { ... }
LOG: 'pm1:', undefined
LOG: undefined
  Note
    ✖ should run updates every 100 seconds. 
LOG: 'pm2:', undefined
LOG: 'pm3:', function mark() { ... }
LOG: 'pm0:', function mark() { ... }
LOG: 'pm1:', undefined
    ✖ should clear the contentQueue on unmount
LOG: 'pm2:', undefined
LOG: 'pm3:', function mark() { ... }

So sinon is setting performance.mark to undefined for some reason.

[tarjei]

So sinon is setting performance.mark to undefined for some reason.

So maybe the testcase should look like this:

describe("issue #136", function () {
    if (performancePresent) {
        it("should clear performance.mark after uninstall", function () {
            var oldMark = performance.mark;
            var clock = sinon.useFakeTimers();
            assert.same(performance.mark, oldMark);
            assert.equals(typeOf performance.mark , 'function'); // I do not know this assert api, but you get the gist
    
            clock.uninstall();
            assert.same(performance.mark, oldMark);
        });
    }
});

[benjamingr]

@tarjei are you able to reproduce it with lolex alone?

[tarjei]

@benjamingr I didn't try as it seemed to me to be related to sinon - esp since your testcase works.

How do I run the tests with performancePresent btw? It seems that the performance object is missing when I run npm test.

[CoderK]

I think I know what the cause is. May I have fix this issue?

[tarjei]

@CoderK I suspect that a PR would be most welcome :) 👍

[CoderK]

Ok, I’m gonna make a patch soon!

[CoderK]

I created pull request, #160. If there is someone who has admin permissions, please review my PR.

[CurtisHumphrey]

Until #160 is approved, I just did this before starting any tests

import lolex from 'lolex'
const org_install = lolex.install
lolex.install = () => {
  return org_install({
    toFake: ['setTimeout', 'clearTimeout', 'setImmediate', 'clearImmediate', 'setInterval', 'clearInterval', 'Date'],
  })
}