title: ReactJS onAnimationEnd doesn't execute during Tests
body: <p>I have a control of which I want to be aware of it's animation start and end. I ended up coding something similar to what is below but during my test (Mocha + Phantom + Karma) the onAnimationEnd event doesn't seem to fire. </p>
  
  <p>The start is easy as it happens on click but the end is my current issue. I've added an example below. If anyone can see what the issue is I'd love to know!</p>
  
  <p>P.S. - Sorry for not having the code in a snippet, I didn't know of any snippet generator that handled test cases.</p>
  
  <p>CSS</p>
  
  <pre><code>@keyframes exampleAnimation {
      0% {
          opacity: 1;
      }
      100% {
          opacity: 0;
      }
  }
  
  .testObject {
      &amp;.animate {
          animation-name: exampleAnimation;
          animation-duration: 1s;
          animation-timing-function: ease-out;
      }
  }
  </code></pre>
  
  <p>TypeScript</p>
  
  <pre><code>import React = require("react");
  
  export interface ITestControlProps {
      /**
       * Called when the element is clicked
       */
      onClick?: () =&gt; void;
  
      /**
       * Called when the animation is complete
       */
      onAnimationComplete?: () =&gt; void;
  }
  export interface ITestControlState {
      /**
       * if the element has been clicked
       */
      isClicked: boolean;
  }
  
  export class TestControl extends React.Component&lt;ITestControlProps, ITestControlState&gt; {
  
    constructor() {
      super();
      this.state = {
        isClicked: false
      };
    }
  
      public render(): JSX.Element {
          let buttonClassName = "testObject ";
  
          if (this.state.isClicked) {
              buttonClassName += " animate";
          }
  
          return (
              &lt;button
                  className = {buttonClassName}
                  onClick = {this.onClick.bind(this)}
                  onAnimationEnd = {this.onAnimationComplete.bind(this)}
                  &gt;
                  Click me!
              &lt;/button&gt;
          );
      }
  
      /**
       * When the button is clicked
       * @param evt: The event that caused this method to be called.  Can be a click or a button press.
       */
      private onClick(evt: UIEvent) {
          this.setState((prevState: ITestControlState) =&gt; {
              prevState.isClicked = !prevState.isClicked;
              return prevState;
          });
  
          if (this.props.onClick != null) {
              this.props.onClick();
          }
  
          console.log("On click fired");
      }
  
      /**
       * When the pulse animation is complete
       */
      private onAnimationComplete(): void {
          if (this.props.onAnimationComplete != null) {
              this.props.onAnimationComplete();
          }
          console.log("onAnimationComplete fired");
      }
  }
  </code></pre>
  
  <p>TypeScript - Test</p>
  
  <pre><code>import chai = require("chai");
  import React = require("react");
  
  // Control
  import {TestControl} from "planner/controls/PresentationalControls";
  
  const expect = chai.expect;
  const TestUtils = React["addons"].TestUtils;
  
  describe("TestControl Control Unit Test", () =&gt; {
  
      let renderedComponent: TestControl;
  
      describe("TestControl default render", () =&gt; {
  
          it ("Animation Complete Success", (done: MochaDone) =&gt; {
              let animationCompleteFunc = () =&gt; {
                  done();
              };
  
              renderedComponent = TestUtils.renderIntoDocument(
                  &lt;TestControl
                      onAnimationComplete = {animationCompleteFunc}&gt;
                  &lt;/TestControl&gt;
              );
  
              expect(renderedComponent).to.not.be.undefined;
  
              var button = TestUtils.scryRenderedDOMComponentsWithTag(renderedComponent, "button")[0];
  
              TestUtils.Simulate.click(button);
          });
      });
  });
  </code></pre>