![Picture of Unit Tests](/assets/images/blog/2023/04/16/00-cover.jpg)

## Intro 

I've been singing the praises of the T3 Stack for building modern web apps of late. Whilst awesome and I 
recommend it strongly to anybody starting a new React+TypeScript app it does have what could be called a serious omission. It does not configure any testing libraries at all. 

I think I understand why this is the case. I hate configuring tests in front-end land at the best of times. There are so many different plugins and configurations to add. They are a constantly moving target and the ones you use get deprecated and replaced. If that wasn't bad enough there are multiple ways to configure the them, between using `.json` files (my preference) and configuring using `.ts|.js` files. It's never what I would call a nice experience, I wish it was done for me by T3 but you can't be mad at them for staying away from this whole mess. 

I have had to configure tests recently and it was exactly as frustrating to configure this time as it was all the previous times so I thought let's write a blog and break it down so we can come back to this in 6 months time when we inevitably have to do it again!

I've got it down to a small collection of additional packages that need to be installed and just a couple of config files (`.json`).  I like to use dedicated `.json` files for these bits of config rather than a code file `.ts|.js`. I just think it makes everything easier to reason about. I also prefer them to be dedicated `.json` files rather than just dumping all config into `package.json`. I've seen some wild version of this file over the years and it's just horrible in my humble opinion.

## Configuration - Packages

First of all if you haven't already got a project you can generate a new T3 stack app using the following:

```bash
npm create t3-app@latest
```

Nex to install additional packages into `package.json` for`Babel`, `React Testing Library` and `Jest`, run the following commands:

### Babel

```bash
npm install --save-dev @babel/preset-env @babel/preset-react @babel/preset-typescript
```

[babel-preset-env](https://babeljs.io/docs/babel-preset-env)

[babel-preset-react](https://babeljs.io/docs/babel-preset-react)

[babel-preset-typescript](https://babeljs.io/docs/babel-preset-typescript)

### Testing Library

```bash
npm install --save-dev @testing-library/react @testing-library/user-event @testing-library/jest-dom
```

[@testing-library/react](https://www.npmjs.com/package/@testing-library/react)

[@testing-library/user-event](https://www.npmjs.com/package/@testing-library/user-event)

[@testing-library/jest-dom](https://www.npmjs.com/package/@testing-library/jest-dom)

### Jest

```bash
npm install --save-dev jest jest-environment-jsdom
```

[jest](https://www.npmjs.com/package/jest)

[jest-environment-jsdom](https://www.npmjs.com/package/jest-environment-jsdom)

## Configuration - Configs

### Babel 

Add a configuration file in the root of the project for Babel and paste in the following content:

File: `babel.config.json`
```json
{
  "presets": [
      "@babel/preset-env",
      "@babel/preset-react",
      "@babel/preset-typescript"
  ]
}
```

### Jest

Add a configuration file in the root of the project for Jest and paste in the following content:

File: `jest.config.json`
```json
{
    "testEnvironment": "jsdom"
}
```

### Package JSON

Find the `scripts` section and `add` the following: 

File: `package.json`

```json
 "scripts": {
    "test": "jest"
  }
```

Your `scripts` section will already include other options. I removed them here for brevity.

## Example 

Now that everything's configured let's build a simple `<Greeting>` component and add a couple of tests.    

File: `/components/greeting/greeting.tsx`

```javascript
import React from "react"
import { 
    type FC
} from "react"

type Props = {
    name: string
}

const Greeting: FC<Props> = ({ name }) => {

    let greeting = `Hello ${ name }!`;

    if (name.length === 0)
        greeting = "I'm sorry I didn't catch your name?"

    return <h1>{ greeting }</h1>
}
export default Greeting
```

File: `/components/greeting/greeting.spec.tsx`

```javascript
import React from "react";
import {render, screen} from "@testing-library/react"
import "@testing-library/jest-dom"
import Greeting from "./greeting"

test("name supplied - displays personalised greeting", async () => {
  // ARRANGE
  render(<Greeting name="liam" />)

  // ACT
  await screen.findByRole("heading")

  // ASSERT
  expect(screen.getByRole("heading")).toHaveTextContent("Hello liam")
})

test("name not supplied - asks for name", async () => {
  // ARRANGE
  render(<Greeting name="" />)

  // ACT
  await screen.findByRole("heading")

  // ASSERT
  expect(screen.getByRole("heading")).toHaveTextContent("I'm sorry I didn't catch your name?")
})
```

If we run the tests using `npm run test` and everything is configured properly then the output should show 2x passing tests. 

![picture showing test results](/assets/images/blog/2023/04/16/01-tests.png)

## Outro

I don't know what you think but that seemed liked a lot of work and a lot of crap just to get going, just so we can add tests of questionable value. 🤫
  
Surely we can come up with a better way than this? 

If you liked this post I am planning to release another post with some actual tests that will cover testing [tRPC](https://trpc.io/) with [Mock Service Worker](https://mswjs.io/docs/api) or more specifically [msw-trpc](https://www.npmjs.com/package/msw-trpc). 

If you haven't already subscribed to my [RSS](https://www.liam-reilly.info/feed.xml) feed, please do to make you don't miss it!

You can download the source code for this post

TESTING T3 STACK APPS

Did you enjoy this post?️

You Might Also Like

HIP POP

Spotify