Testing: Remove react-test-renderer

WordPress · Apr 30, 2024 · 8b7b5c7 · 8b7b5c7
1 parent d36b40d
commit 8b7b5c7
Show file tree

Hide file tree

Showing 16 changed files with 42 additions and 83 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -236,7 +236,6 @@
 		"react-native": "0.73.3",
 		"react-native-url-polyfill": "1.1.2",
 		"react-refresh": "0.14.0",
-		"react-test-renderer": "18.3.1",
 		"reassure": "0.7.1",
 		"redux": "4.1.2",
 		"resize-observer-polyfill": "1.5.1",

diff --git a/packages/block-editor/src/components/block-draggable/test/helpers.native.js b/packages/block-editor/src/components/block-draggable/test/helpers.native.js
@@ -108,11 +108,11 @@ export const initializeWithBlocksLayouts = async ( blocks ) => {
 /**
  * Fires long-press gesture event on a block.
  *
- * @param {import('react-test-renderer').ReactTestInstance} block                  Block test instance.
- * @param {string}                                          testID                 Id for querying the draggable trigger element.
- * @param {Object}                                          [options]              Configuration options for the gesture event.
- * @param {boolean}                                         [options.failed]       Determines if the gesture should fail.
- * @param {number}                                          [options.triggerIndex] In case there are multiple draggable triggers, this specifies the index to use.
+ * @param {HTMLElement} block                  Block test instance.
+ * @param {string}      testID                 Id for querying the draggable trigger element.
+ * @param {Object}      [options]              Configuration options for the gesture event.
+ * @param {boolean}     [options.failed]       Determines if the gesture should fail.
+ * @param {number}      [options.triggerIndex] In case there are multiple draggable triggers, this specifies the index to use.
  */
 export const fireLongPress = (
 	block,
@@ -140,8 +140,8 @@ export const fireLongPress = (
 /**
  * Fires pan gesture event on a BlockDraggable component.
  *
- * @param {import('react-test-renderer').ReactTestInstance} blockDraggable BlockDraggable test instance.
- * @param {Object}                                          [touchEvents]  Array of touch events to dispatch on the pan gesture.
+ * @param {HTMLElement} blockDraggable BlockDraggable test instance.
+ * @param {Object}      [touchEvents]  Array of touch events to dispatch on the pan gesture.
  */
 export const firePanGesture = (
 	blockDraggable,
@@ -169,7 +169,7 @@ export const firePanGesture = (
  *
  * @param {import('@testing-library/react-native').RenderAPI} screen The Testing Library screen.
  *
- * @return {import('react-test-renderer').ReactTestInstance} Draggable chip test instance.
+ * @return {HTMLElement} Draggable chip test instance.
  */
 export const getDraggableChip = ( { getByTestId } ) => {
 	let draggableChip;

diff --git a/packages/block-library/src/gallery/test/helpers.native.js b/packages/block-library/src/gallery/test/helpers.native.js
@@ -65,9 +65,9 @@ export const initializeWithGalleryBlock = async ( {
 /**
  * Gets a gallery item within a Gallery block.
  *
- * @param {import('react-test-renderer').ReactTestInstance} galleryBlock Gallery block instance.
- * @param {number}                                          rowIndex     Row position within the Gallery block.
- * @return {import('react-test-renderer').ReactTestInstance} Gallery item.
+ * @param {HTMLElement} galleryBlock Gallery block instance.
+ * @param {number}      rowIndex     Row position within the Gallery block.
+ * @return {HTMLElement} Gallery item.
  */
 export const getGalleryItem = ( galleryBlock, rowIndex ) =>
 	getInnerBlock( galleryBlock, 'Image', { rowIndex } );

diff --git a/test/native/integration-test-helpers/dismiss-modal.js b/test/native/integration-test-helpers/dismiss-modal.js
@@ -6,7 +6,7 @@ import { fireEvent } from '@testing-library/react-native';
 /**
  * Dismisses a modal.
  *
- * @param {import('react-test-renderer').ReactTestInstance} modalInstance Modal test instance.
+ * @param {HTMLElement} modalInstance Modal test instance.
  */
 export const dismissModal = async ( modalInstance ) =>
 	fireEvent( modalInstance, 'backdropPress' );
diff --git a/test/native/integration-test-helpers/get-block-transform-options.js b/test/native/integration-test-helpers/get-block-transform-options.js
@@ -14,7 +14,7 @@ import { openBlockActionsMenu } from './open-block-actions-menu';
  *
  * @param {import('@testing-library/react-native').RenderAPI} screen    A Testing Library screen.
  * @param {string}                                            blockName Name of the block.
- * @return {[import('react-test-renderer').ReactTestInstance]} Block transform options.
+ * @return {[HTMLElement]} Block transform options.
  */
 export const getBlockTransformOptions = async ( screen, blockName ) => {
 	const { getByTestId, getByText } = screen;

diff --git a/test/native/integration-test-helpers/get-block.js b/test/native/integration-test-helpers/get-block.js
@@ -5,7 +5,7 @@
  * @param {string}                                            blockName          Name of the block.
  * @param {Object}                                            options            Configuration options for getting the block.
  * @param {number}                                            [options.rowIndex] Row index of the block.
- * @return {import('react-test-renderer').ReactTestInstance} Block instance.
+ * @return {HTMLElement} Block instance.
  */
 export const getBlock = ( screen, blockName, { rowIndex = 1 } = {} ) => {
 	return screen.getAllByLabelText(

diff --git a/test/native/integration-test-helpers/get-inner-block.js b/test/native/integration-test-helpers/get-inner-block.js
@@ -6,11 +6,11 @@ import { within } from '@testing-library/react-native';
 /**
  * Gets an inner block from another block.
  *
- * @param {import('react-test-renderer').ReactTestInstance} parentBlock        Parent block from where to get the block.
- * @param {string}                                          blockName          Name of the block.
- * @param {Object}                                          options            Configuration options for getting the block.
- * @param {number}                                          [options.rowIndex] Row index of the block.
- * @return {import('react-test-renderer').ReactTestInstance} Block instance.
+ * @param {HTMLElement} parentBlock        Parent block from where to get the block.
+ * @param {string}      blockName          Name of the block.
+ * @param {Object}      options            Configuration options for getting the block.
+ * @param {number}      [options.rowIndex] Row index of the block.
+ * @return {HTMLElement} Block instance.
  */
 export const getInnerBlock = (
 	parentBlock,

diff --git a/test/native/integration-test-helpers/rich-text-paste.js b/test/native/integration-test-helpers/rich-text-paste.js
@@ -6,10 +6,10 @@ import { fireEvent } from '@testing-library/react-native';
 /**
  * Paste content into a RichText component.
  *
- * @param {import('react-test-renderer').ReactTestInstance} richText       RichText test instance.
- * @param {Object}                                          content        Content to paste.
- * @param {string}                                          content.text   Text format of the content.
- * @param {string}                                          [content.html] HTML format of the content. If not provided, text format will be used.
+ * @param {HTMLElement} richText       RichText test instance.
+ * @param {Object}      content        Content to paste.
+ * @param {string}      content.text   Text format of the content.
+ * @param {string}      [content.html] HTML format of the content. If not provided, text format will be used.
  */
 export const pasteIntoRichText = ( richText, { text, html } ) => {
 	fireEvent( richText, 'focus' );

diff --git a/test/native/integration-test-helpers/rich-text-select-range.js b/test/native/integration-test-helpers/rich-text-select-range.js
@@ -6,9 +6,9 @@ import { typeInRichText } from './rich-text-type';
 /**
  * Select a range within a RichText component.
  *
- * @param {import('react-test-renderer').ReactTestInstance} richText RichText test instance.
- * @param {number}                                          start    Selection start position.
- * @param {number}                                          end      Selection end position.
+ * @param {HTMLElement} richText RichText test instance.
+ * @param {number}      start    Selection start position.
+ * @param {number}      end      Selection end position.
  */
 export const selectRangeInRichText = ( richText, start, end = start ) => {
 	if ( typeof start !== 'number' ) {

diff --git a/test/native/integration-test-helpers/rich-text-type.js b/test/native/integration-test-helpers/rich-text-type.js
@@ -16,13 +16,13 @@ function insertTextAtPosition( text, newText, start, end ) {
 /**
  * Changes the text and selection of a RichText component.
  *
- * @param {import('react-test-renderer').ReactTestInstance} richText                        RichText test instance.
- * @param {string}                                          text                            Text to set.
- * @param {Object}                                          options                         Configuration options for selection.
- * @param {number}                                          [options.initialSelectionStart] Selection start position before the text is inserted.
- * @param {number}                                          [options.initialSelectionEnd]   Selection end position before the text is inserted.
- * @param {number}                                          [options.finalSelectionStart]   Selection start position after the text is inserted.
- * @param {number}                                          [options.finalSelectionEnd]     Selection end position after the text is inserted.
+ * @param {HTMLElement} richText                        RichText test instance.
+ * @param {string}      text                            Text to set.
+ * @param {Object}      options                         Configuration options for selection.
+ * @param {number}      [options.initialSelectionStart] Selection start position before the text is inserted.
+ * @param {number}      [options.initialSelectionEnd]   Selection end position before the text is inserted.
+ * @param {number}      [options.finalSelectionStart]   Selection start position after the text is inserted.
+ * @param {number}      [options.finalSelectionEnd]     Selection end position after the text is inserted.
  */
 export const typeInRichText = ( richText, text, options = {} ) => {
 	const currentValueSansOuterHtmlTags = stripOuterHtmlTags(

diff --git a/test/native/integration-test-helpers/text-input-change-text.js b/test/native/integration-test-helpers/text-input-change-text.js
@@ -6,8 +6,8 @@ import { fireEvent } from '@testing-library/react-native';
 /**
  * Changes the text of a TextInput component.
  *
- * @param {import('react-test-renderer').ReactTestInstance} textInput TextInput test instance.
- * @param {string}                                          text      Text to be set.
+ * @param {HTMLElement} textInput TextInput test instance.
+ * @param {string}      text      Text to be set.
  */
 export const changeTextOfTextInput = ( textInput, text ) => {
 	fireEvent( textInput, 'focus' );

diff --git a/test/native/integration-test-helpers/transform-block.js b/test/native/integration-test-helpers/transform-block.js
@@ -21,7 +21,7 @@ const apiFetchPromise = Promise.resolve( {} );
  * @param {Object}                                            [options]                Configuration options for the transformation.
  * @param {number}                                            [options.isMediaBlock]   True if the block transformation will result in a media block.
  * @param {number}                                            [options.hasInnerBlocks] True if the block transformation will result in a block that contains inner blocks.
- * @return {import('react-test-renderer').ReactTestInstance} Block instance after the block transformation result.
+ * @return {HTMLElement} Block instance after the block transformation result.
  */
 export const transformBlock = async (
 	screen,

diff --git a/test/native/integration-test-helpers/trigger-block-list-layout.js b/test/native/integration-test-helpers/trigger-block-list-layout.js
@@ -15,10 +15,10 @@ import { waitForStoreResolvers } from './wait-for-store-resolvers';
  * case any of the inner elements use selectors that are associated with store
  * resolvers.
  *
- * @param {import('react-test-renderer').ReactTestInstance} block                    Block test instance to trigger layout event.
- * @param {Object}                                          [options]                Configuration options for the event.
- * @param {number}                                          [options.width]          Width value to be passed to the event.
- * @param {number}                                          [options.blockListIndex] Block list index, for cases when there is more than one, like in inner blocks.
+ * @param {HTMLElement} block                    Block test instance to trigger layout event.
+ * @param {Object}      [options]                Configuration options for the event.
+ * @param {number}      [options.width]          Width value to be passed to the event.
+ * @param {number}      [options.blockListIndex] Block list index, for cases when there is more than one, like in inner blocks.
  */
 export const triggerBlockListLayout = async (
 	block,

diff --git a/test/native/integration-test-helpers/wait-for-modal-visible.js b/test/native/integration-test-helpers/wait-for-modal-visible.js
@@ -6,7 +6,7 @@ import { waitFor } from '@testing-library/react-native';
 /**
  * Waits for a modal to be visible.
  *
- * @param {import('react-test-renderer').ReactTestInstance} modalInstance Modal test instance.
+ * @param {HTMLElement} modalInstance Modal test instance.
  */
 export const waitForModalVisible = async ( modalInstance ) => {
 	return waitFor( () =>

diff --git a/test/native/matchers/to-be-visible.js b/test/native/matchers/to-be-visible.js
@@ -38,7 +38,7 @@ function isElementVisible( element ) {
  * - it is not a "Modal" component or it does not have the prop "visible" set to "false".
  * - its ancestor elements are also visible.
  *
- * @param {import('react-test-renderer').ReactTestInstance} element
+ * @param {HTMLElement} element
  * @return {boolean} True if the given element is visible.
  */
 export function toBeVisible( element ) {