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.

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.

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 👋

 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.

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 👍

Blog

Sit down at my Jest Tagged Template Literal table and tidy up your tests.

Andy Coupe

Scenario

Join Our Newsletter. No Spam, Only the good stuff.

Related