How to create and run automated tests for WordPress blocks

[bph]

Discussed in #24

^{Originally posted by juanmaguitar November 28, 2022}
An article about how to create and run automated tests for our custom blocks in WordPress could be useful for both the product itself and the extenders using blocks.

In fact, I see this content as a series of two posts:

• Unit Tests for Blocks: The first one covers a more granular way of testing blocks: Unit Tests with Jest to test a block from its main components (Edit and save)
• E2E Tests (or Integration Tests) for Blocks: A second one covering a more generic way of testing blocks: End-to-end tests with playwright to test the expected block behavior in the WordPress context (the block is properly registered, the frontend behavior works as expected, ...)

The first post could be called "Unit Testing for Blocks" and could cover the following ideas:

• Why having automated tests is a good way to ensure our block work as expected and to document it (among other benefits)
• The difference between Unit Tests and E2E tests
• What is Jest
• Preparing the environment in our project to test our block with Jest
• What to test in a Unit Test for a block - creating some tests for our block
• Launching our test in local
• Bonus: Creating a CI/CD pipeline with GitHub Actions to only allow merge if tests are passing

These posts could even include a brief explanation of what BDD is, what CI is, and how these tests allow the Gutenberg project to grow in a more solid way.

Inspired by this answer in the support forums

[flexseth]

+1 great content idea

[land0r]

Still no writer? So sad, I’ve just check everywhere and still no good guide on that subject. Maybe my comment will boost the activity 😅

[flexseth]

@land0r it's a great topic, I was able to find a resource for testing plugins. Updated Dec. 2024

https://make.wordpress.org/cli/handbook/misc/plugin-unit-tests/

It's a great practice to develop a block as a plugin, the create-block package is the standard for creating blocks. The package creates a basic block inside of a plugin, that you can test using the Plugin Unit Tests link above.

That said, this only tests against coding standards and helps with submission to the WP.org plugin repository.

It won't help with

• responsiveness
• integration with various themes
• does the block work? (advanced functionality)
• benchmarking (if using a service)
• security ??
• etc

You can use software for screenshotting various browsers and OS's, there's also services out there to have actual humans test your plugin for usability.

Playground also has docs for testing plugins and a Make post with good info on testing WP releases with Playground. Created for Core but a lot of the tools should overlap for plugins.

https://make.wordpress.org/test/2024/03/12/test-with-playground/

[land0r]

@flexseth great, thank you! Unfortunately, that's about PHPUnit tests, but I'd love to see a cool guide about e2e tests on Jest or playwright

[sethrubenstein]

Also +1 for really great content that even I have struggled with. I'd love to see a guide on getting setup with writing playwright tests and the best way to go about writing tests.