Skip to content

test(ui-library): add React render smoke test on React 18.3 and 19.2#23320

Open
enricobattocchi wants to merge 3 commits into
trunkfrom
react19-ui-library-tests
Open

test(ui-library): add React render smoke test on React 18.3 and 19.2#23320
enricobattocchi wants to merge 3 commits into
trunkfrom
react19-ui-library-tests

Conversation

@enricobattocchi
Copy link
Copy Markdown
Member

@enricobattocchi enricobattocchi commented May 29, 2026 •
edited
Loading

Context

React 19's automatic JSX runtime no longer applies defaultProps to function/forwardRef components, which crashed @yoast/ui-library rendering (the Yoast metabox/sidebar/Settings). That was fixed by converting the components to ES6 default params in #23317.

To stop that class of regression coming back silently, this PR adds a render smoke test that mounts every @yoast/ui-library component and asserts it renders without throwing, run in CI on both React 18.3 and React 19.2. A failure on either runtime means a component lost a default (or otherwise fails to mount).

Part of the React 19 readiness work tracked in Yoast/reserved-tasks#235.

Summary

This PR can be summarized in the following changelog entry:

  • [@yoast/ui-library] Adds a React render smoke test that mounts every component, run in CI on React 18.3 and 19.2.

Relevant technical choices:

  • The smoke test (packages/ui-library/tests/react-render-smoke.test.js) renders each exported component with the minimal required props and asserts it mounts without throwing; the default-state render paths exercise the components whose defaults previously came from defaultProps.
  • CI (.github/workflows/jstest.yml) runs the suite against React 18.3 and React 19.2, so the same test guards both the current and upcoming runtimes.
  • No production code changes: only the test, its setup, the ui-library jest config, and the CI workflow.

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

  1. From packages/ui-library, run npx jest tests/react-render-smoke.test.js. Every component should render with no thrown errors.
  2. CI runs the suite automatically on both the React 18.3 and React 19.2 matrix legs; both should be green.

Relevant test scenarios

  • Changes should be tested with the browser console open
  • Changes should be tested on different posts/pages/taxonomies/custom post types/custom taxonomies
  • Changes should be tested on different editors (Default Block/Gutenberg/Classic/Elementor/other)
  • Changes should be tested on different browsers
  • Changes should be tested on multisite

None of the above apply: this is a Jest/jsdom test run in CI, not a browser or editor test. The meaningful check is the smoke suite passing on both the React 18.3 and React 19.2 CI legs.

Test instructions for QA when the code is in the RC

  • QA should use the same steps as above.

QA can test this PR by following these steps:

  • Not applicable: this is an internal test/CI change with no user-visible behaviour to verify at RC time.

Impact check

This PR affects the following parts of the plugin, which may require extra testing:

  • Test and CI only: packages/ui-library/tests/, the ui-library jest config, and .github/workflows/jstest.yml. No runtime / shipped-code impact.

Other environments

  • This PR also affects Shopify. I have added a changelog entry starting with [shopify-seo], added test instructions for Shopify and attached the Shopify label to this PR.
  • This PR also affects Yoast SEO for Google Docs. I have added a changelog entry starting with [yoast-doc-extension], added test instructions for Yoast SEO for Google Docs and attached the Google Docs Add-on label to this PR.

Documentation

  • I have written documentation for this change. For example, comments in the Relevant technical choices, comments in the code, documentation on Confluence / shared Google Drive / Yoast developer portal, or other.

Quality assurance

  • I have tested this code to the best of my abilities.
  • During testing, I had activated all plugins that Yoast SEO provides integrations for.
  • I have added unit tests to verify the code works as intended.
  • If any part of the code is behind a feature flag, my test instructions also cover cases where the feature flag is switched off.
  • I have written this PR in accordance with my team's definition of done.
  • I have checked that the base branch is correctly set.
  • I have run grunt build:images and committed the results, if my PR introduces or edits images or SVGs.

Innovation

  • No innovation project is applicable for this PR.
  • This PR falls under an innovation project. I have attached the innovation label.
  • I have added my hours to the WBSO document.

Refs Yoast/reserved-tasks#235, Yoast/reserved-tasks#1251

🤖 Generated with Claude Code

@enricobattocchi enricobattocchi requested a review from a team as a code owner May 29, 2026 22:28
@enricobattocchi enricobattocchi added the changelog: non-user-facing Needs to be included in the 'Non-userfacing' category in the changelog label May 29, 2026
@coveralls
Copy link
Copy Markdown

coveralls commented May 29, 2026

Coverage Report for CI Build 0

Coverage decreased (-0.4%) to 57.252%

Details

  • Coverage decreased (-0.4%) from the base build.
  • Patch coverage: No coverable lines changed in this PR.
  • No coverage regressions found.

Uncovered Changes

No uncovered changes found.

Coverage Regressions

No coverage regressions found.

Coverage Stats

Coverage Status
Relevant Lines: 28406
Covered Lines: 16668
Line Coverage: 58.68%
Relevant Branches: 17987
Covered Branches: 9893
Branch Coverage: 55.0%
Branches in Coverage %: Yes
Coverage Strength: 105892.64 hits per line
💛 - Coveralls

Base automatically changed from feature/fix-gutenberg-23.3 to release/27.8 May 30, 2026 14:31
enricobattocchi and others added 3 commits May 30, 2026 16:54
@enricobattocchi @claude
test(ui-library): add React render smoke test
c56a1f1 
Render every exported visual component with only its required props inside
`<Root>` and assert it mounts without throwing. Omitting optional props is
exactly what surfaces the React 19 class of bug where a dropped `defaultProps`
default becomes `undefined` and is dereferenced, so this catches that class in
isolation, without a WordPress environment.

The test is React-version-agnostic (it uses whatever React is installed); it
has been verified green on both React 18.3.1 (WP 7.0) and React 19.2.4
(Gutenberg 23.3 RC / WP 7.1). Adds `@testing-library/react` and a `test`
script, and excludes the disabled storyshots suite from `jest`.

Refs: Yoast/reserved-tasks#231, Yoast/reserved-tasks#246

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@enricobattocchi @claude
ci: run ui-library render smoke test on React 18.3 and 19.2
55f0dfe 
Add `ui-library` to the `yarn-test-full` matrix so its new render smoke test
runs in CI on the default (lockfile) React 18.3. Add a dedicated
`yarn-test-react19` job that runs the same test against React 19.2.4 (what
WordPress 7.1 / the Gutenberg 23.3 RC ships), forcing the version across the
workspace via a yarn `resolution` (a plain `yarn add -W` would not override
packages that pin react@^18 themselves). @testing-library/react v16 supports
both React versions, so only react/react-dom are pinned.

The React-19 leg is scoped to ui-library for now rather than added as an axis
on the full matrix, because other packages are not React-19-ready yet (e.g.
`components` still uses `react-test-renderer`, removed in React 19). Widen the
matrix as those are addressed.

Refs: Yoast/reserved-tasks#231, Yoast/reserved-tasks#246

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@enricobattocchi @claude
test(ui-library): exercise default-state render paths in the smoke test
ee50099 
The smoke test rendered some components with optional props that masked
default-driven bugs (it passed `steps` to Stepper, hiding the empty-default
render loop). Add cases that render the compound components via their `children`
path with the data prop omitted (Stepper, CheckboxGroup, RadioGroup, Select),
plus a required-only ImageSelect case, so the defaults are exercised.

Verified: 58/58 pass on React 18.3.1, and a negative control (reverting the
Stepper `DEFAULT_STEPS` fix) makes the new Stepper case fail with "Maximum
update depth exceeded", confirming it catches the loop class. The React 19.2
leg runs via the jstest.yml matrix.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@enricobattocchi enricobattocchi force-pushed the react19-ui-library-tests branch from facd95c to ee50099 Compare May 30, 2026 14:54
@enricobattocchi enricobattocchi changed the base branch from release/27.8 to trunk May 30, 2026 14:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

changelog: non-user-facing Needs to be included in the 'Non-userfacing' category in the changelog

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@enricobattocchi @coveralls