How to create and run automated tests for WordPress blocks

[bph]

Discussed in https://github.com/WordPress/developer-blog-content/discussions/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.

[flexseth]

@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

Here's a good video showing some of the ways to test with Gutenberg with Playwright.

About 1/2 of the video is introductory, but the second half shows some examples.

I have more notes on this if anyone picks up the post draft.

[t-hamano]

I previously wrote an article on introducing E2E testing to block development. It's a bit old, but I hope it's useful.

https://aki-hamano.blog/en/2023/11/05/block-e2e/

[bph]

@davidperezgar raised his hand to write Tutorial: How to Add Automated Unit Tests to Your WordPress Plugin

[davidperezgar]

Hello, But my proposal was to make Unit Test for Plugins, not for Blocks. I believe this is different.

[meszarosrob]

I could probably give a stab at writing an intro to e2e testing for a block 🙂

cc @bph

[bph]

Thank you @meszarosrob Sorry I didn't see this sooner... I need to double-check my notification settings. Glad you'd like to write about it.

[meszarosrob]

Thank you @meszarosrob Sorry I didn't see this sooner... I need to double-check my notification settings. Glad you'd like to write about it.

No worries @bph.

Since this was a month ago, I got some other things cooking already. It might be possible for me to start on this only early next year. I know there's no pressure around here. Just to slightly manage expectations.

[bph]

I appreciate the "managing expectations" note, @meszarosrob! Please let us know when you get started.