Migrate from enzyme to Testing library and upgrading to React 18

[vraja-pro]

We’re moving to React 18. WP 6.2 onwards is using that already.
So we are not developing and testing with the correct React version.

Moving to React 18 is not compatible with our tests. We’re going to remove Enzyme in favour of Testing Library: https://testing-library.com/

We’re going to create a feature branch. Where we will:

• Upgrade to React 18
• Remove Enzyme
• Install Testing Library
• Remove Enzyme tests we will no longer support (testing unused components)
• Migrate the rest of the Enzyme tests (around 20)

Notes:

• We're not using Testing Library in the @yoast/components package because we do not expect to add components to this package anymore.
• We're ignoring the yoast-components package because that is in the process of being removed.

Packages tasks

Check this list for each package:

• Update to React 18
• If using Enzyme => replace with Testing Library
• If react-test-render is being used => upgrade to version compatible with React 18

Packages, see tasks above

Beta Give feedback

1. analysis-report
2. components (don't add Testing Library here, see notes)
3. helpers
4. js
5. replacement-variable-editor
6. search-metadata-previews
7. social-metadata-forms
8. social-metadata-previews
9. yoast-components (any trouble due to monorepo? remove the test script so we ignore this in the CI)
10. root (not a package), but let's remove Enzyme from here!

Tests to migrate

Beta Give feedback

1. components/tests/YoastModalTest.js Modal is being used in the editor still
2. js/tests/indexation.test.js Indexation (progress) #20668
   component: tests +1
   
3. js/tests/components/AnalysisCheckList.test.js Used in the editor' pre-publish and document sidebars #20669
   component: tests +1
   
4. js/tests/components/PrePublish.test.js Used in the editor #20670
   component: tests +1
   
5. SemRush feature: js/tests/components/SEMrushCountrySelector.test.js, js/tests/components/SEMrushKeyphrasesTable.test.js and js/tests/components/SEMrushRelatedKeyphrasesModal.test.js #20671
   component: tests +1
   
6. Wincher feature: js/tests/components/WincherKeyphrasesTable.test.js and js/tests/components/WincherTableRow.test.js #20672
   component: tests +1
   
7. Migrate KeywordInput tests #20673
   component: tests +1
   
8. Migrate Insights feature tests #20674
   component: tests +1
   
9. js/tests/settings/search.test.js
10. Replacement variable editor: replacement-variable-editor/tests/ReplacementVariableEditorTest.js #20675
    component: tests +1
    
11. Search metadata previews: search-metadata-previews/tests/SnippetEditorTest.js and search-metadata-previews/tests/SnippetPreviewTest.js #20676
    component: tests +1
    
12. Fix tests in packages/components #20677
    component: tests +1

Tests to remove

Beta Give feedback

1. components/tests/ScreenReaderShortcutTest.js
2. components/tests/YoastModalTest.js

Final checklist

Beta Give feedback

1. Will this make our live code run no longer run in React 17 compatibility mode? If so, are we safe? Thoughts: Legacy lifecycle methods and more setState bundling (one error was caught via tests) Warning: componentWillReceiveProps has been renamed, and is not recommended for use #19867
2. Can we un-delete more tests now that snapshots work fine?
3. Is React in dev deps correct? At least double check we have no imports in the code
4. Ask Shopify team to test with this feature branch

[vraja-pro]

Got blocked with JS package and react testing library.
Also need to address components package, it might be related.