Testing Guide

# All JS tests and linting
npm test

# Unit tests only
npm run test:unit

# Specific test by name pattern
npm run test:unit -- --testNamePattern="TestName"

# Specific test directory
npm run test:unit <path_to_test_directory>

# Watch mode for active development
npm run test:unit:watch

# Check JS linting
npm run lint:js

# Auto-fix JS issues
npm run format

+-- my-component
    +-- test
    |   +-- index.js
    |   +-- mocks/
    |   +-- fixtures/
    +-- index.js

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

test('fires onChange when typing', async () => {
  const user = userEvent.setup();
  const onChange = jest.fn();

  render(<MyComponent onChange={onChange} />);

  const input = screen.getByRole('textbox');
  await user.type(input, 'Hello');

  expect(onChange).toHaveBeenCalled();
});

import { initializeEditor } from 'test/integration/helpers/integration-test-editor';

async function setup(attributes) {
  const testBlock = { name: 'core/my-block', attributes };
  return initializeEditor(testBlock);
}

test('block renders correctly', async () => {
  const { getByRole } = await setup({ text: 'Hello' });
  expect(getByRole('textbox')).toBeInTheDocument();
});

test('should render correctly', () => {
  const { container } = render(<MyComponent />);
  expect(container).toMatchSnapshot();
});

npm run test:unit -- --updateSnapshot --testPathPattern path/to/tests

npm run test:unit:debug

# Start wp-env first
npm run wp-env start

# Run E2E tests
npm run test:e2e

# Specific test file
npm run test:e2e -- <path_to_test_file.spec.js>

# Run with browser visible
npm run test:e2e -- --headed

# Watch mode
npm run test:e2e:watch

# Run Playwright tests
npm run test:e2e:playwright

# All PHP tests
npm run test:php
# or
composer test

# Specific file
vendor/bin/phpunit <path_to_test_file.php>

# Specific directory
vendor/bin/phpunit <path_to_test_directory>/

# Watch mode
npm run test:php:watch

# Check PHP standards
npm run lint:php
# or
vendor/bin/phpcs

# Auto-fix PHP standards
vendor/bin/phpcbf

# Specific file
vendor/bin/phpcbf <path_to_php_file.php>

class My_Block_Test extends WP_UnitTestCase {
    public function test_my_function() {
        // Test the built function (with gutenberg_ prefix)
        $result = gutenberg_block_core_my_block_render_function($args);
        $this->assertEquals($expected, $result);
    }

    public function test_my_class() {
        // Test the built class (with _Gutenberg suffix)
        $handler = new WP_Example_Block_Handler_Gutenberg();
        $result = $handler->process($input);
        $this->assertEquals($expected, $result);
    }
}

# Run performance tests
npm run test:performance

# Compare across branches
./bin/plugin/cli.js perf trunk v8.1.0 v8.0.0

# Use specific test branch
./bin/plugin/cli.js perf trunk v8.1.0 --tests-branch add/perf-tests

# Run native mobile tests
npm run test:native

# Debug native tests
npm run test:native:debug

// Good
test('checking checkbox should disable submit button', () => {
  // ...
});

// Not so good
test('checking checkbox should set state.disabled to true', () => {
  // ...
});

beforeAll(() => {
  // One-time setup for all tests
});

afterEach(() => {
  // Clean up after each test
});

jest.mock('config', () => ({
  isEnabled: jest.fn(() => false),
}));

import { isEnabled } from 'config';

test('feature is disabled by default', () => {
  expect(myFunction()).toBe(false);
});

test('feature can be enabled', () => {
  isEnabled.mockImplementationOnce(() => true);
  expect(myFunction()).toBe(true);
});