How to Write Your First React Unit Test
Tags: react, webdev, typescript, beginners
Published: 2022-04-12 00:13:43

## Welcome Back!
**Where we left off** - [GitHub](https://github.com/samp-reston/my-website/tree/c5e06937b5624f2d641133a3833558d46a263245)

**What we're doing today**:
- Creating a smoke test
- Performing our first TDD iteration

## The Three Laws of Test Driven Development

1. You may not write production code until you have written a failing unit test.
2. You may not write more of a unit test than is sufficient to fail, and not compiling is failing.
3. You may not write more production code than is sufficient to pass the currently failing test.


## Creating your first Unit Test
Before we continue where we left off I have created a separate component for the title of the webpage called `Title.tsx`, I have then added this to a `component` directory within `src`:

![Title Separation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yb18jj409saj8soio3uk.png)

Now we have everything setup, let's write the test.

We'll start by creating a new testing component called `Title.test.js`.

For this test we'll be doing something very simple, checking if the title has rendered. This test isn't something you should be doing for every body of text, however, for now it will act as an example for TDD.

```javascript
test('once rendered title is visible', () => {
  
})
```
We'll start by mounting the Title component.
```javascript
const { render } = require("@testing-library/react")
import Title from './Title'

test('once rendered title is visible', () => {
  render(<Title />)
})
```
Now to actually run the test, if you have the app already running, open a new terminal and run `npm run test`. So we currently have an output similar to this:
![1st Passing Test](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qw2fsl8m98lnxb7bopvi.png)
 
Now we need to make it fail. Let's ask it to find the title:
![Title Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u5s88em59jxlkpym5kku.png)
To get what is rendered, we need another import called `screen`, so we'll use that to find any element on the screen with the text "samuel preston".

```js
const { render, screen } = require("@testing-library/react")
import Title from './Title'

test('once rendered, title is visible', () => {
  render(<Title />)

  screen.getByText(/samuel preston/i)
})
```

With this we'll get an output similar to this:
![1st Failed Test](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o9jnbpk6nh5etjz0ow1j.png)
 
Now, lets write the code to satisfy this requirement. We'll head back into the Title component and create a new h1 element containing "Samuel Preston".

```js
function Title() {
  return (
    <>
      <h1>
        Samuel Preston
      </h1>
    </>
  )
}
```

Now once we save the file, our testing terminal should re-run the test, you should see an output similar to this:
![1st Iteration Complete](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/shwwqaxpptopnwgr4bdr.png)

This marks the first iteration of our TDD journey within this project.

## GitHub
To view where we're at you can follow this [link](https://github.com/samp-reston/my-website/tree/aee5220d27a6f18303e6b62ad5e83affa158ea5b) to the final commit at the end of each post to follow along!