samedi 25 avril 2015

Extremely frustrated setting up ReactJS / Jest for TDD - isn't testing supposed to be simple?

I was originally going to post this as an issue on the appropriate github repo, but after a lot of effort I realized that I actually have no idea which package would be the appropriate place to post.

After reading at least a dozen different webpages with a dozen different sets of instructions for how to get jest even installed on my computer (why do I need to install a 10GB download of Visual Studio to compile one file - is it really that difficult to ship a precompiled binary?), and then another dozen pages and many hours of figuring out the jest/gulp/browserify/babelify/sourcemaps/etc nightmare, I finally get a test environment that can actually run tests, only to find out that I can't for the life of me get a passing test on any of my components!

I'm starting by trying to test my AppBarButtons component, which should display the Login link if no user is logged in, and the logout link if they are logged in. It's quite simple, here's the code:

var AppBarButtons = React.createClass({
  contextTypes: {
    router: React.PropTypes.func
  },
  render () {
    var button;
    if (this.props.session && this.props.session.id > 0) {
      button = <LogoutButton />;
    } else {
      button = <LoginButton session={this.props.session} />;
    }
    var {router} = this.context;
    return (
      <div className="app-bar-buttons">
      {button}
      </div>
    );
  }
});

Now, maybe I'm wrong here but I thought jest was supposed to mock the other components and require()s, but I'm getting this error Cannot read property 'func' of undefined about a component that's at least two require()s away from the AppBarButtons (the LoginForm inside of a Dialog behind a Button component), and about the same piece of code that's in the AppBarButtons component, too:

contextTypes: {
  router: React.PropTypes.func
}

So I have two questions: one is, obviously, how do I test this component? And two, how do I debug this kind of issue so that I can even understand which package of the ~80 packages listed in my package.json is even the right one to start looking at for solutions? Surely this will not be the only time some random issue comes up that I have no way to deal with.

By the way, I'm obviously not an experienced professional, but it seems like react/jest have made it unnecessarily difficult to get testing up and running by decoupling everything and "leaving it up to the community" to provide a workable solution. When there's scant docs and the goal is to push out the next iteration before the first iteration has even been properly tested and documented, the learning curve is so steep that nobody can keep up. I'm sure I'm not the only one who feels this way. Just my 2c in case anybody at FB is reading this...

Aucun commentaire:

Enregistrer un commentaire