Run unit tests in Playwright

I'm a big believer in using the right tool for the job - but I'm a bigger believer in the best tool for the job is the one you've got.

While you might not install Playwright to just do unit tests, if you already have it installed, there is no need to install an additional dependency (such as Jest) to check your functions & methods.

In simple terms, unit tests are the idea of testing a specific function - the classic example always given is passing two parameters into a function that adds them together and produces a single integer of which you can test the result.

For some of our projects we already have Playwright installed and wanted a way to unit test some utility classes without using a separate framework (and thus, loading a whole new set of dependencies & files).

The Code

For our examples, we are going to be using a function which limits an array to the first X number of items

export default function(array, limit) {
	return array.slice(0, limit);
};

This lives in a file called limit.js - we'll be making our test next to it.

The Test

Our conventions state we would make a file next to the JS file as limit.spec.ts - however if you have Playwright setup, you probably have standards/conventions of your own.

// Import the playwright functions
import { test, expect } from '@playwright/test';

// Import our JS file
import limit from './limit.js';

// Create a new test
test('Limit', async () => {
	// Create a dummy array
	let data = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];

	// Check our array length matches our expected length
	expect(limit(data, 3).length).toBe(3);
});

With this test code, we import the JS file and fire the function - we then check the output. We don't use the page or request object.

You can still use test.describe to group tests & share data - for example, if I wished to test these Mean, Median and Mode functions from Ale House Rock, I could do something like:

import { test, expect } from '@playwright/test';
import meanMedianMode from './meanMedianMode.js';

// Verified with
// https://www.calculatorsoup.com/calculators/statistics/mean-median-mode.php
test.describe('Calculations', async () => {
	const data = [9, 10, 12, 13, 13, 13, 15, 15, 16, 16, 18, 22, 23, 24, 24, 25];

	const output = meanMedianMode(data);

	// Mean - average
	test('Mean', () => {
		expect(output.mean).toStrictEqual(16.75);
	})

	// Median - middle value
	test('Median', () => {
		expect(output.median).toStrictEqual(15.5);
	})

	// Mode - most frequent value
	test('Mode', () => {
		expect(output.mode).toStrictEqual(["13"]);
	})
});