Simulate React Events with TestUtils

[00:01] React's test utilities allow us to simulate any event that's supported by React. To get started taking a look at this simulation, I've got a really quick component here called UpDown.

[00:09] Its getInitialState returns a val of zero. It's got this inc method which increments that value, a dec method which decrements that value, then our render method, we're returning a button tied to that in the onClick to the decrement method, a span with a innerHTML of that val, and then another button tied to the increment method.

[00:30] Here, in my index.html, I'm bringing in react-with-addons over cdn. I've got my UpDown. Then I'm just rendering that component. Let's take a look at it really quick. Everything works as expected.

[00:44] To tap into that simulate method in the test utilities, I'm going to assign a variable called test to React.addons.TestUtils. I'm going to take my React.renderComponent. I'm also going to assign that to a variable. I'm going to call that app. I'm going to say test.Simulate.

[01:05] Once we're in the simulate, the next thing we need to pass in is our event. In our case, it's a click. It could an onmouseover. It could be all sorts of things. Then we need to give that a target, so that's going to be app.refs. We'll do increment in this case, and then just getDOMNode(), so it should click on that DOMNode.

[01:21] Now, when we load this, what we're expecting to happen is for React to simulate a click on this increment button here and our value to become one. That looks like it worked just fine. If we want to get kind of silly with it, we'll do that three times. We get a three. If we want to just drop that into a setInterval every half second, that works just fine as well. Let's clear this out.

[01:49] The issue here is that doesn't really get us any closer to running a suite of tests. To do that, here's our proverbial cake in the oven. What I'm doing here is exact same setup. I'm bringing in react-with-addons, but I'm also bringing the Mocha CSS, the Mocha library, and the Chai library all over cdn, then the UpDown library.

[02:12] Some really basic fundamental configuration here, but nothing that you can't just run in the browser. There's no JS. There's nothing, no setup here. You just run this in the browser.

[02:22] To get started, I'm going to say describe. I'm going to call this UpDown. Here's our suite. Then we're going to have our first test here. It, we're going to say should have a val of 1. We'll pass that done. When we're done, we're going to run done.

[02:46] Here, what we're going to do is we're going to say var ud, I'm just going to shorten UpDown to ud, say test.renderIntoDocument(UpDown()). There's our component rendered into the document.

[03:02] I can actually just grab this right from here, drop that right there. We're running the exact same simulation, except now, instead of app, it's ud. Now we can check our value here, so we're going to say ud.state.val.should.equal(1). There's our first test. Let's try that out. Save, put it in a browser, and it passed that test. Awesome.

[03:35] If we wanted to fail that test, we'll say equal(0and we can see it failed. Cool. That works. We'll just do one more here really quick. Just copy this over. Here we'll say click's dec should have a val of -1, should.equal(-1). I think we're looking good. Now we have our two tests using test utilities and the simulation or the simulate method on the test utilities.