Setup Functions

Loading "Streamlining Repetitive Test Setup for Optimal Efficiency"

Streamlining Repetitive Test Setup for Optimal Efficiency

🦉 I want to talk with you about something. You can read more about this in a blog post titled Avoid Nesting when you're Testing which is where these examples came from.

You may have see tests like this in the past (don't look too closely, just here to give you an idea of the shape of these kinds of tests):

import { render } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import * as React from 'react'

import Login from '../login'

describe('Login', () => {
	let utils,
		handleSubmit,
		user,
		changeUsernameInput,
		changePasswordInput,
		clickSubmit

	beforeEach(async () => {
		handleSubmit = jest.fn()
		user = { username: 'michelle', password: 'smith' }
		utils = await render(<Login onSubmit={handleSubmit} />)
		changeUsernameInput = value =>
			userEvent.type(utils.getByLabelText(/username/i), value)
		changePasswordInput = value =>
			userEvent.type(utils.getByLabelText(/password/i), value)
		clickSubmit = () => userEvent.click(utils.getByText(/submit/i))
	})

	describe('when username and password is provided', () => {
		beforeEach(() => {
			changeUsernameInput(user.username)
			changePasswordInput(user.password)
		})

		describe('when the submit button is clicked', () => {
			beforeEach(() => {
				clickSubmit()
			})

			it('should call onSubmit with the username and password', () => {
				expect(handleSubmit).toHaveBeenCalledTimes(1)
				expect(handleSubmit).toHaveBeenCalledWith(user)
			})
		})
	})

	describe('when the password is not provided', () => {
		beforeEach(() => {
			changeUsernameInput(user.username)
		})

		describe('when the submit button is clicked', () => {
			let errorMessage
			beforeEach(() => {
				clickSubmit()
				errorMessage = utils.getByRole('alert')
			})

			it('should show an error message', () => {
				expect(errorMessage).toHaveTextContent(/password is required/i)
			})
		})
	})

	describe('when the username is not provided', () => {
		beforeEach(() => {
			changePasswordInput(user.password)
		})

		describe('when the submit button is clicked', () => {
			let errorMessage
			beforeEach(() => {
				clickSubmit()
				errorMessage = utils.getByRole('alert')
			})

			it('should show an error message', () => {
				expect(errorMessage).toHaveTextContent(/username is required/i)
			})
		})
	})
})

Personally, I find this kind of test extremely hard to work with. The number of nested blocks and shared variables makes it hard to follow the flow of the test and understand what's going on.

The point is there's some shared setup that needs to happen for each test. But using test hooks and function scope for variables to do so is very confusing. We can do better:

import { render } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import * as React from 'react'

import Login from '../login'

// here we have a bunch of setup functions that compose together for our test cases
// I only recommend doing this when you have a lot of tests that do the same thing.
// I'm including it here only as an example. These tests don't necessitate this
// much abstraction. Read more: https://kcd.im/aha-testing
async function setup() {
	const handleSubmit = jest.fn()
	const utils = await render(<Login onSubmit={handleSubmit} />)
	const user = { username: 'michelle', password: 'smith' }
	const changeUsernameInput = value =>
		userEvent.type(utils.getByLabelText(/username/i), value)
	const changePasswordInput = value =>
		userEvent.type(utils.getByLabelText(/password/i), value)
	const clickSubmit = () => userEvent.click(utils.getByText(/submit/i))
	return {
		...utils,
		handleSubmit,
		user,
		changeUsernameInput,
		changePasswordInput,
		clickSubmit,
	}
}

async function setupSuccessCase() {
	const utils = await setup()
	utils.changeUsernameInput(utils.user.username)
	utils.changePasswordInput(utils.user.password)
	utils.clickSubmit()
	return utils
}

async function setupWithNoPassword() {
	const utils = await setup()
	utils.changeUsernameInput(utils.user.username)
	utils.clickSubmit()
	const errorMessage = utils.getByRole('alert')
	return { ...utils, errorMessage }
}

async function setupWithNoUsername() {
	const utils = await setup()
	utils.changePasswordInput(utils.user.password)
	utils.clickSubmit()
	const errorMessage = utils.getByRole('alert')
	return { ...utils, errorMessage }
}

test('calls onSubmit with the username and password', async () => {
	const { handleSubmit, user } = await setupSuccessCase()
	expect(handleSubmit).toHaveBeenCalledTimes(1)
	expect(handleSubmit).toHaveBeenCalledWith(user)
})

test('shows an error message when submit is clicked and no username is provided', async () => {
	const { handleSubmit, errorMessage } = await setupWithNoUsername()
	expect(errorMessage).toHaveTextContent(/username is required/i)
	expect(handleSubmit).not.toHaveBeenCalled()
})

test('shows an error message when password is not provided', async () => {
	const { handleSubmit, errorMessage } = await setupWithNoPassword()
	expect(errorMessage).toHaveTextContent(/password is required/i)
	expect(handleSubmit).not.toHaveBeenCalled()
})

To me, this is much easier to understand. It may be a little overkill for the purpose of the example, but the point is if you have shared setup you can use regular JavaScript mechanisms (functions!) rather than complicated wiring together of hooks.

I call these functions simply "setup functions". But they're similar to the idea of "Object Mother" or a "Test Object Factory". You can read even more about these ideas in my blog post titled AHA Testing.

👨‍💼 Great, with that context, could you make a setup function for creating our request object please?

Don't overthink this one. We're literally just moving some code into a function, but it's important enough that we want to make you do it anyway.

08. HTTP Mocking/03. Setup Functions (💪 problem)

Setup Functions