JavaScript Testing Suite

This boilerplate includes a starting setup for running linting, unit tests, and end-to-end tests on your JavaScript.

Source Code

Installation

Run npm install to install JSHint, Jest, and Playwright, as well as some required libraries for working with them (JSDom, wgwhat-fetch).

npm install

To run your tests, use the npm run test:* task scripts, where * is the type of test to run.

# lint your code
npm run test:lint

# run unit tests
npm run test:unit

# run end-to-end tests
npm run test:e2e

# run all tests
npm run test:all

The Boilerplate

The .jshintrc file defines the ES version JSHint should use.

{
  "esversion": 11
}

The --coverage flag is enabled by default for Jest. You can remove it in the package.json file.

The server task is used to open up a local server in Playwright.

"scripts": {
	"server": "python3 -m http.server 8000",
	"test:lint": "jshint . --exclude node_modules",
	"test:unit": "node --experimental-vm-modules node_modules/.bin/jest /tests/unit --coverage",
	"test:e2e": "npx playwright test tests/e2e",
	"test:all": "npm run test:lint && npm run test:unit && npm run test:e2e"
},

The playwright.config.js file is used to configure how Playwright should run, including which browsers to test and how to run a local server for your tests.

import {devices} from '@playwright/test';

let config = {
	projects: [
		{
			name: 'chromium',
			use: { ...devices['Desktop Chrome'] },
		},
		{
			name: 'firefox',
			use: { ...devices['Desktop Firefox'] },
		},
		{
			name: 'webkit',
			use: { ...devices['Desktop Safari'] },
		},
	],
	webServer: {
		command: 'npm run server',
		url: 'http://localhost:8000/'
	},
	use: {
		baseURL: 'http://localhost:8000/',
	},
};

export default config;

Test files are located in the /tests directory, with subdirectories for /unit and /e2e tests. Each directory is pre-populated with a dummy file you can use as a starting point for your tests.