React at Preact

Seems like requiring 'expect' overrides Jasmine in test files. For example, spies only work if you call them like expect spies. Once removing the 'expect' requirement, spies functioned as they would with jasmine. Further proof: jasmine.clock() instantiated a clock object, without any requiring of Jasmine. Jasmine seems to be included automatically, likely because of karma configs.

npm run test

Testing Notes:

Router:

One big issue with our test suite was stubbing out our router. It was not immediately obvious what was going wrong.

This is what our example tests looked like BEFORE we came up with a solution:

// pages/Login/Login-test.js
/*global beforeEach */
/*global describe, it */

var React = require('react/addons');
var TestUtils = React.addons.TestUtils;
var expect = require('expect');
var Login = require('./');
var AuthActions = require('actions/AuthActions');

describe('Login', function () {
  // login is a Component that contains Links
  var login = TestUtils.renderIntoDocument(<Login />);

  it('renders form with text fields and submit button if no user is logged in', function () {
    expect(login).toExist();
    expect(login.getDOMNode().textContent).toContain('Log In');
  });
});

With this code, we were receiving an 'Uncaught TypeError: Cannot read property 'makeHref' of undefined' error. It was not immediately clear what was going on, until we realized that we were rendering our Smart Component directly, not through a router, and therefore had no router context. So, we didn't have access to router methods, like makeHref, which gets executed on Link rendering.

We eventually found and used this example of a stubbed router, and it helped solve the problem.

TODO: explain what this is doing, in more depth

After creating our stubbed router, we imported it into our test file (note: we saved it as a function in our test/util file):

// pages/Login/Login-test.js
/*global beforeEach */
/*global describe, it */

var React = require('react/addons');
var TestUtils = React.addons.TestUtils;
var expect = require('expect');
var Login = require('./');
var AuthActions = require('actions/AuthActions');
import stubRouterContext from 'test/utils';

describe('Login', function () {
  var StubbedLogin = stubRouterContext(Login, {}, {});
  var login = TestUtils.renderIntoDocument(<StubbedLogin />);

  it('renders form with text fields and submit button if no user is logged in', function () {
    expect(login).toExist();
    expect(login.getDOMNode().textContent).toContain('Log In');
  });
});