A refreshing way to test the frontend
Tags: webdev, react, testing, javascript
Published: 2022-07-17 14:11:15

I gave it an earnest try!

All of that was in [Better Specs and Better Tests](https://dev.to/noriller/testing-better-specs-2nig), as much as I could, especially the parts I had my doubts about.

Guess what? I liked it!

## The project

Just so we are on the same page, here’s the deployed version so you can just see what it does:

[https://refreshing-way-test.vercel.app/](https://refreshing-way-test.vercel.app/)

And the Github repo:

[https://github.com/Noriller/refreshing-way-test](https://github.com/Noriller/refreshing-way-test)

### How it should work

Basically, it’s just a form with two inputs and a button.

Fill in the inputs, click the button and you get the ID of the created resource.

(I’m using [jsonplaceholder](https://jsonplaceholder.typicode.com/) API, so nothing is actually created)

And if you don’t fill something, it shows you errors.

### How it was done

I’ve used `Vite` to create a `React` project and took the chance to try out `Vitest` for testing, I’m also using `Testing Library`.

Inside the test files, it's no different than `Jest`, so no problem there.

The setup was easy enough but I also didn't need to do any special configuration.

The running of the tests is fast!

And they also have a [VSCODE extension](https://marketplace.visualstudio.com/items?itemName=ZixuanChen.vitest-explorer) that makes it easy to run and debug them. 

I use `Wallaby`, which is paid and totally worth it, but I'm really impressed and already recommending you to use their extension if your project is using `Vitest`.

---

## The testing

Now that we’re on the same page, the testing.

The two biggest things I have changed, from my previous approach, were to use the “single expectation” tests, this also lead me to use a lot more nesting with `describe` blocks where I could use two of the A’s of testing (arrange, act) and then let the final one for the `it`/`test` blocks (assert).

I’ve also stopped using “should” and end up with the “describing the expected behavior”.

### The result

The result is this test file:

[https://github.com/Noriller/refreshing-way-test/blob/master/src/app.spec.jsx](https://github.com/Noriller/refreshing-way-test/blob/master/src/app.spec.jsx)

On the `describe` blocks I either `arrange` or `act` then on the `it` I `assert`.

I’m using the `beforeEach` to either render or do something and if you use ESLINT with the recommended rules for `Testing Library` you should probably see some error if you try that.

I understand the reasons behind this, but even then, with the current API of `Testing Library`, you don’t really need to initialize anything since you can do everything using `screen`.

What I do agree with is that in text format you might be lost as to what is being done and at which point. But on a code editor where you can just collapse things and easily navigate, this shouldn’t be a problem.

---

But in any case, you can still do something like this:

[https://github.com/Noriller/refreshing-way-test/blob/master/src/app.version2.spec.jsx](https://github.com/Noriller/refreshing-way-test/blob/master/src/app.version2.spec.jsx)

This way you know exactly what’s going on on each test, at the cost of having to copy the steps everywhere.

In this example, I hoisted everything I would need and gave them names easy to understand, but when they didn’t fit or it was just a “one-off”, then I just used what I needed.

---

So… which one did you like more or which one do you use or got interested enough to try?

---

### The console

As you run the tests (check the README), you will see something like this:

```markdown
✓ src/app.version2.spec.jsx (27)
    ✓ <App> (27)
        ✓ on default render (27)
            ✓ renders text of not submitted
            ✓ renders input for title
            ✓ renders input for body
            ✓ renders a button (2)
                ✓ with submit text
                ✓ that is enabled
            ✓ dont render the title error label
            ✓ dont render the body error label
            ✓ when you submit a form (20)
                ✓ inputting both values (9)
                    ✓ the title input has the input value
                    ✓ the body input has the input value
                    ✓ when submitting (7)
                        ✓ disables the button
                        ✓ after api call complete (6)
                            ✓ reenables the button
                            ✓ renders the id
                            ✓ has called the API once
                            ✓ has called the API with
                            ✓ changes the text with the id
                            ✓ clears the form
                ✓ without inputting values (3)
                    ✓ shows a title error
                    ✓ shows a body error
                    ✓ doesnt call the API
                ✓ inputting only the title (4)
                    ✓ dont show a title error
                    ✓ shows a body error
                    ✓ doesnt call the API
                    ✓ dont clear the form
                ✓ inputting only the body (4)
                    ✓ shows a title error
                    ✓ dont show a body error
                    ✓ doesnt call the API
                    ✓ dont clear the form
```

Or, you can end up with something like this:

```markdown
- <App> on default render renders text of not submitted
- <App> on default render renders input for title
- <App> on default render renders input for body
- <App> on default render renders a button with submit text
- <App> on default render renders a button that is enabled
- <App> on default render dont render the title error label
- <App> on default render dont render the body error label
- <App> on default render when you submit a form inputting both values the title input has the input value
- <App> on default render when you submit a form inputting both values the body input has the input value
- <App> on default render when you submit a form inputting both values when submitting disables the button
- <App> on default render when you submit a form inputting both values when submitting after api call complete reenables the button
- <App> on default render when you submit a form inputting both values when submitting after api call complete renders the id
- <App> on default render when you submit a form inputting both values when submitting after api call complete has called the API once
- <App> on default render when you submit a form inputting both values when submitting after api call complete has called the API with
- <App> on default render when you submit a form inputting both values when submitting after api call complete changes the text with the id
- <App> on default render when you submit a form inputting both values when submitting after api call complete clears the form
- <App> on default render when you submit a form without inputting values shows a title error
- <App> on default render when you submit a form without inputting values shows a body error
- <App> on default render when you submit a form without inputting values doesnt call the API
- <App> on default render when you submit a form inputting only the title dont show a title error
- <App> on default render when you submit a form inputting only the title shows a body error
- <App> on default render when you submit a form inputting only the title doesnt call the API
- <App> on default render when you submit a form inputting only the title dont clear the form
- <App> on default render when you submit a form inputting only the body shows a title error
- <App> on default render when you submit a form inputting only the body dont show a body error
- <App> on default render when you submit a form inputting only the body doesnt call the API
- <App> on default render when you submit a form inputting only the body dont clear the form
```

Which is not unlike what you would get in case of an error.

`FAIL src/app.version2.spec.jsx > <App> > on default render > when you submit a form > inputting both values > when submitting > after api call complete > clears the form`

As much as I want to have tests saying what they are doing, I hardly manage to make something this specific.

But that is something that was just a happy accident, it simply happen and I was as surprised as you.

---

## Pros and cons

### Pros

Since you split the `arrange` and `act` into blocks, I feel it makes it easier to catch cases, because at each new nested block you can focus on the current block and see all the "what if's" that you can do.

More than that, it lets you think on a smaller step each time, I feel like I don't need to think about the entire behavior of a block, just on the individual one I'm on. This atomicity also helps with TDD.

This also makes it possible to use something like BDD to write specifications on the "user journey" for each part of the application.

### Cons

Verbosity is a given with this approach. I'm not even talking about the two different versions, but more about that you explode the `assertion` blocks that would normally live in one `test` block to multiple ones.

Another one would probably be performance. Something that you would do one time in one test, now is done over and over again in multiple.

---

## Are you refreshed?

This is a different way of testing, this even changed the way I’ve approached some tests I’ve made.

While this can be used on the backend (and I’m using it), on the frontend I feel like it’s TDD.

I’ve tried TDD on the frontend before, but that hasn't gone well. But with this approach, after the code is done I can still think back step by step of what is going on, find edge cases and fill in the others.

Considering the test is usually done, this doesn’t really fit the norm.

[https://github.com/Noriller/refreshing-way-test/blob/master/src/app.version3.spec.jsx](https://github.com/Noriller/refreshing-way-test/blob/master/src/app.version3.spec.jsx)

```markdown
✓ src/app.version3.spec.jsx (7)
   ✓ <App> (7)
     ✓ on default render (7)
       ✓ renders the component
       ✓ when you submit a form (6)
         ✓ inputting both values (3)
           ✓ has both values
           ✓ when submitting (2)
             ✓ disables the button
             ✓ after api call complete (1)
               ✓ get the id and clears the form
         ✓ without inputting values (1)
           ✓ shows errors
         ✓ inputting only the title (1)
           ✓ shows error for the body
         ✓ inputting only the body (1)
           ✓ shows error for the title
```

I’ve just refactored the third version. I hate it.

It’s smaller and runs faster, yes. But I couldn’t express what the tests actually do. I have to use some generic wording or just omit a lot of stuff that is happening.

Not only that, I know I did even worse than that because in this one I at least kept the `describe` blocks so there’s at least some separation, but I know I would usually have even less than that.

### Tests are also code and code should be clean and legible.

For the third one you would be inclined to maybe add a lot of comments, or just let it be as is.

Meanwhile the first two you could maybe call “self-documenting” code.

---

With this, I just urge you to try it.

Try it and then come back and say what you think, better yet… leave a comment for yourself here! Say what you think of it now and then come back to check if it continues or if you’re going to change something.

---

Cover Photo by [National Cancer Institute](https://unsplash.com/@nci?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/testing-refresh?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)