Sit down at my Jest Tagged Template Literal table and tidy up your tests.
Tags: javascript, typescript, testing, react
Published: 2021-02-09 23:25:32

# Scenario
We have a really simple button component which receives a status on the props object and renders different button text based on the value of the status. 

This simple component will be called `LouisButton`. The value of the status prop will be one of four values which can be seen in the code below. 

```typescript
const buttonTextMapper = {
  available: 'Buy now',
  unavailable: 'Unavailable',
  reserved: 'This product is reserved',
  outOfStock: 'Out of stock',
}

type ButtonProps = {
  status: 'available' | 'unavailable' | 'reserved' | 'outOfStock'
}

export const LouisButton: React.FC<ButtonProps> = ({ status }) => {
  const buttonText = buttonTextMapper[status]

  return (
    <button>{buttonText}</button>
  )
}
```
Now let's write some tests for `LouisButton` using Jest and React Testing Library.

```typescript
import { render } from '@testing-library/react'
import { LouisButton } from './button'

describe('LouisButton', () => {
  it('should render "Buy now" if the status is available', () => {
    const {getByText} = render(<LouisButton status={'available'}/>)

    expect(getByText('Buy now')).toBeInTheDocument()
  })

  it('should render "Unavailable" if the status is unavailable', () => {
    const {getByText} = render(<LouisButton status={'unavailable'}/>)

    expect(getByText('Unavailable')).toBeInTheDocument()
  })

  it('should render "This product is reserved" if the status is reserved', () => {
    const {getByText} = render(<LouisButton status={'reserved'}/>)

    expect(getByText('This product is reserved')).toBeInTheDocument()
  })

  it('should render "Out of stock" if the status is outOfStock', () => {
    const {getByText} = render(<LouisButton status={'outOfStock'}/>)

    expect(getByText('Out of stock')).toBeInTheDocument()
  })
})
```
Remember, this is a simple button. But if more statuses were to be added, things could get ugly. We can improve this and make things easier to digest for the next developer who comes working in this area.

Say hello to `it.each` 👋

```typescript
 it.each`
      status           | buttonText
      ${'available'}   | ${'Buy now'}
      ${'unavailable'} | ${'Unavailable'}
      ${'reserved'}    | ${'This product is reserved'}
      ${'outOfStock'}  | ${'Out of stock'}
  `('should render $buttonText if the status is $status', ({buttonText, status}) => {
    const {getByText} = render(<LouisButton status={status}/>)

    expect(getByText(buttonText)).toBeInTheDocument()
  })
```
Jest will run a test across each row in the tagged template literal table, mapping the title of each column to a variable which you can see in the test description, preceded by a dollar sign. This helps make your test descriptions read nicely. 

![Nice test descriptions](https://dev-to-uploads.s3.amazonaws.com/i/ry94t0ht7m902v83dhcw.png)

We can then destructure these variables and use them in our assertions. I think this pattern is much more maintainable than continuously adding more `it` blocks. 

If another set of statuses are introduced then it's no big deal. Just add them to the table 😀

Thanks for reading 👍