Ideas for making testing in react/js easier

test-ideas.js

/*
Some of the pains I'm experiencing in testing JS:
- subject "appears out of nowhere" (as do "describe", "it", and "assert")
- it isn't clear what methods are available on subject
- stubs must happen outside of tests
- stubs take up a lot of space in test files
- stub methods require the developer to think about whether it's a class or component
- stubs require outside-scope closure capture of variable to be used in tests
- it isn't lexically clear where the stubbing "ends", e.g. the life cycle of a stubbed class method
- mountComponent doesn't automatically unmount?
- assert.ok(x.called) shows true/false failure, assert.called(x) better?
- assert.ok(x.calledWith(args)) shows true/false failure, assert.calledWith(x, args) better?
*/

// Possible DSL solution:

describe("UserForm", () => {
  mount(UserForm, (subject) => {
    interim( (i) => {
      var find = i.stub(UserStore, "find");
      var update = i.stub(UserStore, "update");
      it("should do something", () => {
        assert.called(find);
      });
      it("should do something else...", () => {
        stub(UserStore, "findAll", (findAll) => {
          assert.calledWith(find, ["name"]);
          assert.called(findAll);
        });
      });
    });
  });
});

// other example, this time with mount called on an interim object
interim( (i) => {
  subject = i.mount(UserForm);
});

/*
i.e. "stub" and "mount" can either be wrapping functions, or called on an interim object. If
called as a wrapping function, it automatically restores the stub or unmounts the component
afterward. If called on an interim object, the stub is restored or the component is unmounted 
after the interim scope.
*/

I prefer context or sandbox to interim. Also you'll need to pass a reference to the mocha suite (this inside the describe callback) to the mount and context/sandbox/interim functions in order to add the setup and teardown.

oh yeah, re: the reference to the mocha suite, just to save you from a "gotcha" -- you'll have to do describe("UserForm", function() { rather than describe("UserForm", () => { because the latter does implicit lexical binding of this