Core Tech
Gutenberg
Testing

Testing

JavaScript

This covers our testing suite in JavaScript for the pmc-gutenberg plugin as of August of 2023 as well as requirements for testing.

Testing suite

The plugin relies on the @wordpress/scripts (opens in a new tab) package which provides several features, including JS unit tests (opens in a new tab).

npm run test, npm run test:watch and npm run test:update are three commands that have been added to the package.json scripts config available to devs in this plugin, though others do exist which were deemed less helpful to include.

  • npm run test runs all the tests for js, json, and unit tests.
  • npm run test:watch keeps the unit tests in watch mode (does not test js or json).
  • npm run test:update will update snapshot testing that each block uses.

Test coverage

At the time of writing this (August of 2023), there are only two JavaScript test requirements in the pmc-gutenberg plugin, though we expect this to expand as we improve the codebase.

Snapshot Testing

Each block, when scaffolded, creates a snapshot test of the block registration. This results in a mock data file which is created the first time a test is run against the block. The tests live in the block's test directory. That directory includes:

An index.js file which has the test.

import { ad } from '../index.js';
 
describe( 'PMC Ad block tests', () => {
	it( 'returns null for the save method', () => {
		expect( ad ).toMatchSnapshot();
	} );
} );

And the snap file in the __snapshots__ directory.

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`PMC Ad block tests returns null for the save method 1`] = `
{
  "attributes": {
    "location": {
      "default": "",
      "type": "string",
    },
    "mapTo": {
      "default": "pmc-ad",
      "type": "string",
    },
    "provider": {
      "default": "",
      "type": "string",
    },
    "showPlaceholder": {
      "default": false,
      "type": "boolean",
    },
  },
  "category": "pmc",
  "description": "Insert an ad in content.",
  "edit": [Function],
  "icon": "money-alt",
  "save": [Function],
  "supports": {
    "anchor": false,
    "customClassName": false,
    "html": false,
  },
  "title": "PMC Ad",
}
`;

Any time any part of the block registration, attributes, supports object, etc are updated the test will fail unless we update the snapshot test. That can be done by running npm run test:update.

Unit tests

Unit test coverage is relegated to the util and services functions for the time being, but will eventully extend to components and other features in the plugin.

The @wordpress/scripts](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/ (opens in a new tab)) package will look inside the src directory for any test directories or file extensions and run those tests automatically.

Every util and services function MUST be accompanied by a jest test file unless discussed with a tech lead and noted. That can be done by adding a test.js file for each util/services function file.

For example:

  • comma-separate.js
  • comma-separate.test.js — you may also see comma-separate.spec.js, but we prefer .test.js to keep things clear.

Jest testing information can be found here (opens in a new tab).

React Testing suite

We're working adding React Testing into the plugin. This is in the works, but documentation can be found here (opens in a new tab) in the mean time.

Pre-requisites:

  • You must be able to run PHPUnit tests in your local development environment
  • Access to an environment where you can use the block you are trying to test
UtilsLegacy Tech