Chapter 10. Testing Components

In the last chapter, we looked at ways of making our components friendly for plugin developers. We saw a few of the benefits of dependency injection and how AdonisJS Fold can help us achieve it with minimal effort.

In this chapter, we will learn about testing—automated testing, effective testing, before-you-make-a-mess-of-your-code testing. We will learn about the benefits of testing and the different kinds of tests.

Eat your vegetables

Is there something you really don't like to eat? Perhaps it's a kind of vegetable or fruit. When I was a kid, there were many things I didn't like to eat. I couldn't even remember what many of them tasted like, and they didn't hurt me. I just made up my mind that they were bad, and I didn't like them.

Some developers have similar habits. Are there things you don't like to do as a developer? Not because they're difficult or bad, but just because...

For me, testing was one of those things. I learned about testing many years after I started programming, and it's still something I need to actively work on. I know why it's good, and why the common arguments against testing are bad. Still, I need to convince myself to continually test my work well.

I had to learn that it's not enough just to click through an interface, that testing isn't really testing unless it can be run automatically, that testing isn't really useful unless it happens continuously, and that testing is often...

Types of tests

Many books can (and have been) filled with the intricacies of testing. There's a lot of jargon and we could go on for quite some time. Instead, I want to focus on a handful of terms, which I think will be most useful to us. There are two common kinds of tests we can write.

Unit tests

Unit tests are tests that focus on one small, practical unit of work at a time. Given a non-trivial class or component, a unit test will focus on just one method or even just a single part of that method (if the method does many things).

To illustrate this, consider the following example code:

class Page extends React.Component {
    render() {
        return (
            <div className="page">
                <h1>{this.props.title}</h1>
                {this.props.content}
            </div>
        );
    }
}

class Pages extends React.Component {
    render() {
        return (
            <div className="pages">
                {this.getPageComponents()}
       ...

Testing with assertions

Assertions are the spoken/written language constructs made in the code. They look and function similar to how I've been speaking about them. In fact, most tests are structured in the same way we've been describing tests:

• Given some pre-conditions

• When something happens

• We see some post-conditions

The first two points happen as we create objects and components and call their various methods. Assertions happen in the third point. Node.js ships with a few basic assertion methods, which we can use to write our first tests:

import assert from "assert";

assert(
    rendered.match(/<h1 data-reactid=".*">Home<\/h1>/g)
);

There are quite a few assertion methods we can use:

• assert(condition), assert.ok(condition)

• assert.equal(actual, expected)

• assert.notEqual(actual, expected)

• assert.strictEqual(actual, expected)

• assert.notStrictEqual(actual, expected)

• assert.deepEqual(actual, expected)…

• assert.notDeepStrictEqual(actual, expected)

• assert.throws(function, type)

You can add an...

Summary

In this chapter, you learned about the benefits of writing tests and running them often. We created a few tests for our classes and components and made assertions about their behavior.

We've now covered all the topics I want to share with you. Hopefully, they've given you all the tools to start creating interfaces with confidence. We've learned so much together; covering topics such as single component designs and states, how components talk to each other (through things such as context), how to structure and decorate the whole system, and even how to test it.

The React community is just beginning, and you can join it and influence it. All it will take is for you to spend a bit of time building things with React and talking to others about your experiences doing so.