Error: Performance.mark is not a function

[reyraa]

Hi,

What am I doing?
I'm trying to migrate from react 15 to react 16, consequently migrate from enzyme v2.x to v3.x. I have about 500 unit tests in which I use enzyme to mount my component. I followed Migration Guide and faced this error in over 100 tests:

The error I hit:

FAILED TESTS:
  MyComponent
    ✖ title of my test
      HeadlessChrome 0.0.0 (Mac OS X 10.13.0)
    TypeError: performance.mark is not a function
        at beginMark (webpack:///node_modules/react-dom/cjs/react-dom.development.js:7406:0 <- src/tests.js:93987:17)
        at startWorkLoopTimer (webpack:///node_modules/react-dom/cjs/react-dom.development.js:7618:0 <- src/tests.js:94199:7)
        at performWork (webpack:///node_modules/react-dom/cjs/react-dom.development.js:12787:0 <- src/tests.js:99368:7)
        at batchedUpdates (webpack:///node_modules/react-dom/cjs/react-dom.development.js:13244:0 <- src/tests.js:99825:9)
        at performFiberBatchedUpdates (webpack:///node_modules/react-dom/cjs/react-dom.development.js:1646:0 <- src/tests.js:88227:10)
        at stackBatchedUpdates (webpack:///node_modules/react-dom/cjs/react-dom.development.js:1637:0 <- src/tests.js:88218:10)
        at batchedUpdates (webpack:///node_modules/react-dom/cjs/react-dom.development.js:1651:0 <- src/tests.js:88232:10)
        at Object.batchedUpdatesWithControlledComponents [as unstable_batchedUpdates] (webpack:///node_modules/react-dom/cjs/react-dom.development.js:1664:0 <- src/tests.js:88245:12)
        at webpack:///node_modules/react-dom/cjs/react-dom-test-utils.development.js:1216:0 <- src/tests.js:189114:14
        at Object.simulateEvent (webpack:///node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:250:0 <- src/tests.js:184077:15)

I've tried to fix the issue reducing the number of tests I run every time, it doesn't seem to help.

Application specs:
react: 16.0.0
react-dom: 16.0.0
Enzyme: 3.1.0
react-test-renderer: 16.0.0
Any help would be appreciated.

[ljharb]

I would recommend not migrating two things at once. Get react 15 and enzyme 3 working first; then upgrade to react 16.

[reyraa]

@ljharb I've migrated react first, application is working without any issues. the migration was smooth and easy. all of my e2e tests pass just fine. the only problem is with enzyme throwing this error

[ljharb]

Right, but if you don't have enzyme 3 passing on react 15 first, then we can't know if it's react 16 breaking things (which might be expected), or if it's enzyme 3 breaking things.

[ljharb]

Unit tests passing are much more important than e2e tests anyways.

[oliviertassinari]

I'm subscribing to this thread as having a similar issue. I haven't figured out how such error is even possible given the defensive check React is using: https://github.com/facebook/react/blob/v16.0.0/src/renderers/shared/fiber/ReactDebugFiberPerf.js#L42.

[oliviertassinari]

Ok, I have found the root cause. It's coming from the usage of useFakeTimers() from sinon.

[oliviertassinari]

I think that we can close this issue. Here is another one: sinonjs/fake-timers#136.

[ljharb]

@reyraa are you also using sinon and useFakeTimers?

[reyraa]

@ljharb Yes we're using fake timers in multiple tests. and @oliviertassinari yes the problem stemmes in our sinon. useFakeTimers usages. thank you

[remojansen]

Here is a workaround that worked for me sinonjs/fake-timers#136 (comment)