window.requestAnimationFrame not defined and nodeType null

[kennetpostigo]

Hey,

I'm helping test an animation library and my tests are failing because it says that requestAnimationFrame is not defined and nodeType not defined. The code works I've verified that in codepen. However I think its because jest isn't exposing requestAnimationFrame property on the window object. Just to make sure here in MDN docs it should be on the window object. I console log the window object in the test and a very very large object is logged out to my terminal. I'm new to Jest but heres what the test looks like so I may be doing something wrong:

import React from 'react';
import renderer from 'react-test-renderer';
import Anime from './../src/Anime.js';

// fails with ReferenceError: requestAnimationFrame is not defined
it('Anime single child Snapshot', () => {
  const tree = renderer.create(
    <Anime easing="easeOutElastic"
           loop={true}
           duration={1000}
           direction="alternate"
           loop={true}
           delay={(el, index) => index * 240}
           translateX='13rem'
           scale={[.75, .9]}>
           <p>1</p>
      </Anime>
  ).toJSON();
  expect(tree).toMatchSnapshot();
});

// fails with TypeError: Cannot read property 'nodeType' of null
it('Anime multi-child Snapshot', () => {
  const tree = renderer.create(
    <Anime easing="easeOutElastic"
           loop={true}
           duration={1000}
           direction="alternate"
           loop={true}
           delay={(el, index) => index * 240}
           translateX='13rem'
           scale={[.75, .9]}>
           <p>1</p>
           <p>2</p>
           <p>3</p>
      </Anime>
  ).toJSON();
  expect(tree).toMatchSnapshot();
});

[cpojer]

jsdom doesn't ship with requestAnimationFrame. You'll need to put a polyfill into your setupFiles config like this one: https://gist.github.com/paulirish/1579671

[kennetpostigo]

@cpojer okay just fixed that, do you know why the Cannot read property 'nodeType' of null is occurring? It happens here:

Before:

   // mutiple children failed test complains about the children not having key prop
  {children.map((child, i) => (React.cloneElement(child, {ref: this.addRef})))}

After:

  // so I added key to the prop and then Cannot read property 'nodeType' of null is caused
  {children.map((child, i) => (React.cloneElement(child, {key: i, ref: this.addRef})))}

[cpojer]

The test renderer currently doesn't support refs; this is a feature the React team is currently working on.

[kennetpostigo]

Okay, any timetable you may know of?

[cpojer]

I think probably like 15.4 but I'm not on the React team, so not sure. See facebook/react#7649

[kennetpostigo]

@cpojer thank you!

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.