React-testing-library: TypeError: Cannot read property 'now' of undefined

Created on 13 Feb 2019 · 13Comments · Source: testing-library/react-testing-library

I am trying to introduce react-testing-library in an existent project which has used jasmine/enzyme until now. I am getting a runtime error when I run my tests. It looks like react-testing-library is clashing with other libraries in my project (maybe the existing enzyme). Here are the specs:

react-testing-library version: 5.8.0
react version: 16.4.1
node version: 10.13.0
npm (or yarn) version: npm = 6.4.1, yarn = 1.6.0

Relevant code or config:

I cannot reproduce the full code here. Here is the relevant part.

import * as React from 'react';
import { Hierarchy } from './Hierarchy';
import { cleanup, render } from 'react-testing-library';

afterEach(cleanup);

const data = {...}

describe('Hierarchy', () => {
  it('should initially render root nodes', () => {
    const { getAllByTestId } = render(
      <Hierarchy data={data} />
    );
    expect(getAllByTestId('hierarchy-node').length).toBe(1);
  });
});

What happened:

I am getting a runtime error when I run tests ( npm run test )

screenshot_1

Reproduction:

It is not possible to create a minimum repository to reproduce this issue

This is the first time I am using this library. I might have missed some point.

Thanks for your support

jsdom

Source

seyaobey

👍2

Most helpful comment

Ok, I was able to solve this error by better applying your suggestion @Dianoga

const dom = new JSDOM('<html><body><script></script></body></html>');
global.document = dom.window.document;
global.window = dom.window;
global.window.Date = Date;

seyaobey on 19 Feb 2019

👍5

All 13 comments

Were you mocking the date object?

alexkrolick on 13 Feb 2019

@alexkrolick yes. the data object is just a an array of key-pair values.

seyaobey on 14 Feb 2019

_date_ needs to be mocked. JSDom doesn't do that automatically. In my setup I added window.Date = Date

Dianoga on 15 Feb 2019

👍2

@Dianoga sorry if I missed something but there is not date in my code above. It is data which is just an array of key-pair values (needed in the hierarchy component):
const data = [ { name: 'foo' } ]

seyaobey on 18 Feb 2019

@seyaobey The testing library requires the date object to exist. So you'll need to set that up.

Dianoga on 18 Feb 2019

@Dianoga Thanks for the answer. I have implemented your suggestion. Before my test I am mocking the Date object:
window.Date = Date

I am still getting the same error. Is there an example where this mocking is done because in the docs, this is not stated somewhere (I may be wrong). I have just followed the example of the github page.

ps. I am using Jasmine instead of Jest; I mention it in case it may be linked to the error I am getting.

seyaobey on 19 Feb 2019

Ok, I was able to solve this error by better applying your suggestion @Dianoga

const dom = new JSDOM('<html><body><script></script></body></html>');
global.document = dom.window.document;
global.window = dom.window;
global.window.Date = Date;

seyaobey on 19 Feb 2019

👍5

@seyaobey && @Dianoga thanks for your posts. I spent some time trying to fix this issue too, but looks like that mocking window.Date is currently the best way to be able to get around this error. I hope someone clever will deal with it any time soon :)

czechue on 17 Mar 2019

I had it working in typescript using the following:

declare global {
  interface Window { Date: any; }
}
window.Date = Date;

But now it has stopped working with no changes. Any suggestions?

chetmurphy on 23 Mar 2019

Ahh.. I forgot that I had modified 'node_modules/wait-for-expect/lib/index.js:16:21' by commenting out the code:

var _ref = typeof window !== "undefined" ? window : global,
    setTimeout = _ref.setTimeout,
    now = _ref.Date.now;

It now works again.

chetmurphy on 23 Mar 2019

In my case I was still initializing enzyme and setting the testEnvrionment to ‘node’ in my jest configuration.

From: Jenson Miralles notifications@github.com
Sent: Tuesday, March 26, 2019 12:01:32 AM
To: kentcdodds/react-testing-library
Cc: chetmurphy; Comment
Subject: Re: [kentcdodds/react-testing-library] TypeError: Cannot read property 'now' of undefined (#300)

Hello, do you guys know how to fix this error on React-Native?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHubhttps://nam05.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fkentcdodds%2Freact-testing-library%2Fissues%2F300%23issuecomment-476499759&data=02%7C01%7C%7C3507c110c7b64ad17abc08d6b1b8e186%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636891804941302104&sdata=QotyN8k25DyrH01C1agGMlSD9WrB1jVSoWl7Ye5d01o%3D&reserved=0, or mute the threadhttps://nam05.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAJrbVlYsFD3-GRVD3_ZReLgsReneH4Lcks5vacXMgaJpZM4a5io7&data=02%7C01%7C%7C3507c110c7b64ad17abc08d6b1b8e186%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636891804941312115&sdata=1xylgY4UeP2CncuZi9bQ0mXnVOxB%2FCn%2FL0k65S4tbeY%3D&reserved=0.

chetmurphy on 26 Mar 2019

In my case I was still initializing enzyme and setting the testEnvrionment to ‘node’ in my jest configuration.
…
________________________________ From: Jenson Miralles notifications@github.com Sent: Tuesday, March 26, 2019 12:01:32 AM To: kentcdodds/react-testing-library Cc: chetmurphy; Comment Subject: Re: [kentcdodds/react-testing-library] TypeError: Cannot read property 'now' of undefined (#300) Hello, do you guys know how to fix this error on React-Native? — You are receiving this because you commented. Reply to this email directly, view it on GitHubhttps://nam05.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fkentcdodds%2Freact-testing-library%2Fissues%2F300%23issuecomment-476499759&data=02%7C01%7C%7C3507c110c7b64ad17abc08d6b1b8e186%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636891804941302104&sdata=QotyN8k25DyrH01C1agGMlSD9WrB1jVSoWl7Ye5d01o%3D&reserved=0, or mute the threadhttps://nam05.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAJrbVlYsFD3-GRVD3_ZReLgsReneH4Lcks5vacXMgaJpZM4a5io7&data=02%7C01%7C%7C3507c110c7b64ad17abc08d6b1b8e186%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636891804941312115&sdata=1xylgY4UeP2CncuZi9bQ0mXnVOxB%2FCn%2FL0k65S4tbeY%3D&reserved=0.

It worked! Thank you @chetmurphy! 🎉