Cannot Simulate Events using ReactTestUtils.Simulate or enzyme simulate

[Crizzooo]

Hey,

I am trying to write tests to check the state changes of my component on mouse enter.

describe('animeButton', () => {
  it('swaps between normal and hover views', () => {
    const Button = mount( <AnimeButton
                            hoverTextClassName="hoverText"
                            normalTextClassName="normalText" />);
    // ReactTestUtils.Simulate.mouseEnter(Button); <-- Would also error out
    const element = Button.find('a');
    element.simulate('mouseEnter');  <-- Errors out

When I run the little bit of code, I get an error 'NodeList is not defined' from Line 219 of /dist/anime.js. I was able to alter the source code to get passed this function if of unknownHTMLElement type, but then I hit a tags button elsewhere in the anime.js source code.

Ive tried many different approaches and cant find a way to simulate this mouseEnter.

What's the current recommended solution for testing components that use Anime components?

Full Error Log:

1) animeButton swaps between normal and hover views:
     ReferenceError: NodeList is not defined
      at p (node_modules/react-anime/dist/anime.min.js:1:3112)
      at Array.map (native)
      at _ (node_modules/react-anime/dist/anime.min.js:1:5577)
      at Q (node_modules/react-anime/dist/anime.min.js:1:8715)
      at H (node_modules/react-anime/dist/anime.min.js:1:9096)
      at e.createAnime (node_modules/react-anime/dist/anime.min.js:1:12115)
      at e.value (node_modules/react-anime/dist/anime.min.js:1:11575)
      at node_modules/react-dom/lib/ReactCompositeComponent.js:264:25
      at measureLifeCyclePerf (node_modules/react-dom/lib/ReactCompositeComponent.js:75:12)
      at node_modules/react-dom/lib/ReactCompositeComponent.js:263:11
      at CallbackQueue.notifyAll (node_modules/react-dom/lib/CallbackQueue.js:76:22)
      at ReactReconcileTransaction.close (node_modules/react-dom/lib/ReactReconcileTransaction.js:80:26)
      at ReactReconcileTransaction.closeAll (node_modules/react-dom/lib/Transaction.js:209:25)
      at ReactReconcileTransaction.perform (node_modules/react-dom/lib/Transaction.js:156:16)
      at ReactUpdatesFlushTransaction.perform (node_modules/react-dom/lib/Transaction.js:143:20)
      at ReactUpdatesFlushTransaction.perform (node_modules/react-dom/lib/ReactUpdates.js:89:32)
      at Object.flushBatchedUpdates (node_modules/react-dom/lib/ReactUpdates.js:172:19)
      at ReactDefaultBatchingStrategyTransaction.closeAll (node_modules/react-dom/lib/Transaction.js:209:25)
      at ReactDefaultBatchingStrategyTransaction.perform (node_modules/react-dom/lib/Transaction.js:156:16)
      at Object.batchedUpdates (node_modules/react-dom/lib/ReactDefaultBatchingStrategy.js:62:26)
      at Object.batchedUpdates (node_modules/react-dom/lib/ReactUpdates.js:97:27)
      at node_modules/react-dom/lib/ReactTestUtils.js:349:18
      at ReactWrapper.<anonymous> (node_modules/enzyme/build/ReactWrapper.js:776:11)
      at ReactWrapper.single (node_modules/enzyme/build/ReactWrapper.js:1421:25)
      at ReactWrapper.simulate (node_modules/enzyme/build/ReactWrapper.js:769:14)
      at Context.<anonymous> (test/index2.test.js:26:13)```

[alaingalvan]

Since React Anime is a DOM based library, it might not work with test suites. There's some tricks to get around that that I'll try to implement though.

In the meantime for the test case at least, try not to use React Anime in it.

[tonyxyz]

Just three years late with this reply but:

I had the same problem with animejs in a different context. I find it helpful to abstract my animation methods to a helper class and then stub them out.

In a before or beforeEach: sinon.stub(AnimationHelper.prototype, 'someAnimationMethod');

And in the corresponding after or afterEach: AnimationHelper.prototype.someAnimationMethod.restore();

And you can do all the sinon spying and faking you want.

(I'm not currently working with React though so I couldn't say how helpful this approach would be there)